javascript - Empty images when resizing images using canvas -
i'm developing image resizer files input field multiple files.
the files first added array of json objects, because use array in webapp add, remove , rearrange objects.
my problem firefox , ie11 both presents empty images when traversing trough filelist, , can't figure out going wrong, , neither has figured out workaround firefox , ie. chrome resizes , show images ok.
i have tried 2 diferent methods. serial function traversing trough files array, , asyncronous read-resize-show function. both have same problem 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 1 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") (var i=0; < 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 can figure out problem.
Comments
Post a Comment