因此,我正在使用FileReader()和Canvas在将图像上传到我们的服务器之前调整图像的大小,因为在我的用户使用此Web应用程序的地方数据连接不良。该代码可在任何台式机浏览器和Android设备上运行,而不能在任何iOS设备上运行。有没有人遇到这个问题,找到了合适的解决方案?
这是我正在使用的代码,它适用于iOS以外的所有内容。
$.each(files,function(k,v){
var img = document.createElement("img");
var canvas = document.createElement('canvas');
var reader = new FileReader();
reader.onload = function(e) {img.src = e.target.result; };
reader.readAsDataURL(v);
reader.onloadend = function(){
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 800;
var MAX_HEIGHT = 800;
var width = img.width;
var height = img.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 ctxIMG = canvas.getContext("2d");
ctxIMG.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/jpeg",0.6);
previewElement.append("<img src='" + dataurl + "' />");
imageArray[key].push(dataurl);
if(k == files.length - 1){
console.log(files.length);
console.log("Images:");
console.log(imageArray);
}
};
});