Question

我正在为包含多个文件的输入字段中的文件开发图像缩放器。

首先将文件添加到Json对象数组中，因为我在webapp中使用该数组来添加，删除和重新排列对象。

我的问题是Firefox和IE11在遍历文件列表时都呈现空图像，我无法弄清楚出了什么问题，而且我也没想到Firefox和IE的解决方法。 Chrome会调整大小并显示图像。

我尝试了两种不同的方法。一个串行函数遍历文件数组，以及一个异步的read-resize-show函数。两个都有空图像的相同问题。

HTML是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <script src="test.js"></script>
</head>
<body>
  <input type="file" name="file" id="file" onChange="showFile(this)" multiple>
  <input type="button" value="Show one by one" onClick="showPicturesSerial(dataArray,0)">
  <input type="button" value="Show asyncronous" onClick="showPicturesAsync(dataArray)">
  <div id="imageListSer" style="width:auto;min-height:150px;border:1px solid black;"></div>
  <div id="imageListAsn" style="width:auto;min-height:150px;border:1px solid black;"></div>
</body>
</html>

JavaScript是：

dataArray=new Array();
showFile=function(obj){
    for(i=0;i<obj.files.length;i++){
        dataArray[i]={
            file:obj.files[i],
            data:{
                name:obj.files[i].name,
                size:obj.files[i].size,
                type:obj.files[i].type
                // Add more values
            }
        }
    }
}
showPicturesSerial=function(files,i){
    var imageListSer=document.querySelector("#imageListSer");
    if(i==0)imageListSer.innerHTML="";
    isPic=/^image\//
    if(i<files.length&&isPic.test(files[i].file.type)){
        var file=files[i].file;
        var reader=new FileReader();
        reader.onerror=function(error) {
             console.log ("error",error);
            i++;
            setTimeout(showPicture(files,i),999999);
        }
        reader.onload=function(e) {
            var canvas=document.createElement("canvas");
            var tImg=document.createElement("img");
            var src;
            src=e.target.result;
            tImg.src=src;
            var MAX_WIDTH=150;
            var MAX_HEIGHT=150;
            var width=tImg.width;
            var height=tImg.height;

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width=MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height=MAX_HEIGHT;
                }
            }
            canvas.width=width;
            canvas.height=height;
            var ctx=canvas.getContext("2d");
            ctx.drawImage(tImg, 0, 0, width, height);
            var img=document.createElement("img");
            img.src=canvas.toDataURL();
            var div=document.createElement("div");
            div.style.display="inline-block";
            div.appendChild(img)
            div.appendChild(document.createElement("br"));
            div.appendChild(document.createTextNode(file.name));
            div.appendChild(document.createElement("br"));
            div.appendChild(document.createTextNode(file.type));
            imageListSer.appendChild(div);
            console.log("finished:",file.name);
            i++;
            return showPicturesSerial(files,i);
        }
        reader.readAsDataURL(file);
    }
}
function showPicturesAsync(files) {
    var imageListAsn=document.querySelector("#imageListAsn")  
    for (var i=0; i < files.length; i++) {
      if(i==0)imageListAsn.innerHTML="";
        isPic=/^image\//
        if(!isPic.test(files[i].file.type))return;
        var file=files[i].file;
        if (!/^image\//.test(file.type)) {continue;}
        var canvas=document.createElement("canvas");
        var img=document.createElement("img");
        var div=document.createElement("div");
        div.style.display="inline-block";
        div.appendChild(img);
        div.appendChild(document.createElement("br"));
        div.appendChild(document.createTextNode(file.name));
        div.appendChild(document.createElement("br"));
        div.appendChild(document.createTextNode(file.type));
        imageListAsn.appendChild(div);
        var reader=new FileReader();
        reader.onerror=function(error) {
            console.log ("error",error);
        }
        reader.onload=(function(aImg) { return function(e) {
                var bImg=document.createElement("img");
                var canvas=document.createElement("canvas");
                bImg.src=e.target.result;
                var MAX_WIDTH=150;
                var MAX_HEIGHT=150;
                var width=bImg.width;
                var height=bImg.height;
                if (width > height) {
                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width=MAX_WIDTH;
                    }
                } else {
                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height=MAX_HEIGHT;
                    }
                }
                canvas.width=width;
                canvas.height=height;
                var ctx=canvas.getContext("2d");
                ctx.drawImage(bImg, 0, 0, width, height);
                aImg.src=canvas.toDataURL();
                console.log("finished:",i);
            }; 
        })(img);
        reader.readAsDataURL(file);
    }
}

我希望有人能解决这个问题。

使用画布调整图像大小时清空图像

0 个答案: