I'm developing an image resizer for files from input field with multiple files.
The files are first added to an array of Json objects, because i use that array in my webapp to add, remove and rearrange objects.
My problem is that Firefox and IE11 both presents empty images when traversing trough the filelist, and I can't figure out what is going wrong, and i neither has figured out a workaround for Firefox and IE. Chrome resizes and show the images ok.
I have tried two diferent methods. A serial function traversing trough the files array, and a asyncronous read-resize-show function. Both have the same problem with empty images.
The HTML is:
<!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>
The JavaScript is:
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);
}
}
I hope someone can figure out this problem.
