我有以下脚本(针对此问题进行了细分),该脚本使用FileReader API允许用户在提交照片之前上传照片并显示照片的缩略图。
try {
reader = new FileReader();
reader.onload = (function (theImg) {
return function (evt) {
var img=new Image();
img.src = evt.target.result;
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
var thumb_width = 200;
var thumb_height = 150;
img.onload = (function(){
var width = img.width;
var height = img.height;
if (width > height) {
if (width > thumb_width) {
height *= thumb_width / width;
width = thumb_width;
}
} else {
if (height > thumb_height) {
width *= thumb_height / height;
height = thumb_height;
}
}
canvas.width=width;
canvas.height=height;
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
//alert(canvas.toDataURL().length);
theImg.src = canvas.toDataURL();
});
};
}(source_img));
reader.readAsDataURL(file);
} catch (e) {
alert("\nUnfortunately this method of uploading photos is not supported by this browser\n\nYou will be redirected to a standard Upload Form\n");
return false;
}
使用Chrome在Mac OS X(和Windows XP& 7)上测试时,即使没有img.onload =(function(){}),Safari和Opera也能正常运行;但是在Firefox中需要它,因为在加载图像之前,源图像被分配给空白画布。
很好,所以都在桌面上工作,直到我尝试使用Safari和Chrome在我的iPhone上进行测试。由于我无法直接在我的设备上调试,我设法使用警报来显示有时源图像被分配给空画布,我认为这将由img.onload =(function(){})修复;但显然这在移动浏览器中不起作用,除非其他因素导致其失败。
我尝试了以下代替img.onload =(function(){});
$(img).load(function() { });
甚至
img.addEventListener("load", function () { }, false);
如果有人有任何想法或建议,我将不胜感激。感谢。