Question

我正在尝试使用以下代码调整图像大小

这是图像上传标签

<input type="file" name="files" id="imgUpload" onchange="readURLBottom(this)" value="Select" >
<ul id="logoPlaceholder"></ul>

这是我用于图像调整大小的以下javascript代码

var objBottom, reader, imgData, maxHeight, maxWidth, imageHeight, imageWidth; 

function readURLBottom(input) 
{
    if (input.files && input.files[0]) 
    {
        reader = new FileReader();
        reader.onload = function (e) 
        {
            objBottom = new Image();
            objBottom.src = e.target.result;

            imageHeight  = objBottom.height;
            imageWidth  = objBottom.width;

            if (imageWidth > maxWidth) 
            {
                imageHeight = imageHeight / (imageWidth / maxWidth);
                imageWidth = maxWidth;
            }

            var c = document.createElement('canvas');

            c.height = imageHeight;
            c.width = imageWidth;

            var ctx = c.getContext("2d");
            ctx.drawImage(objBottom, 0, 0, imageWidth, imageHeight);

            objBottom.src = c.toDataURL();

            var strToAppend = '<li class="span3"><a  class="thumbnail"><i onclick=RemoveImage(this) class="icon-remove pull-right"></i><img src="' + objBottom.src + '" width="100px"/></a></li><p></p>';
            $("#logoPlaceholder").html(strToAppend);

        };

        reader.readAsDataURL(input.files[0]);
    }
}

这在Chrome中运行良好。但这不适用于Firefox。对于Firefox中的以下两个值，我得零。

imageHeight  = objBottom.height;
imageWidth  = objBottom.width;

Answer 1

尝试使用图像对象的代码onload。

objBottom = new Image();
objBottom.onload = function(){
    //Your code
}
objBottom.src = //set the source here

同时检查控制台是否有错误。

Answer 2

我已经过了同样的情况。

你可以试试这个：

imageHeight = objBottom.height;
imageWidth  = objBottom.width;    

if ((imageHeight==0)&&(imageWidth==0)){  //Firefox issue
    readURLBottom(input);  //recursive call
}

它对我有用。我希望它可以帮到你。

使用javascript在firefox中调整图像大小问题

2 个答案: