使用 html5 画布上传 flickr 风格的图片

Question

我正在尝试使用 html5 画布制作图片上传库。我正在尝试在客户端调整图像大小并显示预览。但是当我上传多张像 5mb 这样的大尺寸图片时，浏览器会停止并且有时会崩溃。我检查了 flickr，所以无论我上传多少张图片，他们的系统都会立即调整上传图片的大小，而无需浏览器加载。此外，我的缩略图在调整大小时质量很差，无论我做些什么让它变得更好，我的浏览器上的负载都会激增。这是我的图像预览和调整大小的代码

$(document).ready(function() { 


if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('getfiles').onchange = function(){
        var files = document.getElementById('getfiles').files;
        for(var i = 0; i < files.length; i++) {
            resizeAndUpload(files[i]);
        }
    };
} else {
    alert('The File APIs are not fully supported in this browser.');
}

function resizeAndUpload(file) {
    var reader = new FileReader();
    reader.onloadend = function() {

    var tempImg = new Image();
    tempImg.src = reader.result;
    tempImg.onload = function() {

        var MAX_WIDTH = 220;
        var MAX_HEIGHT = 120;
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
               tempH *= MAX_WIDTH / tempW;
               tempW = MAX_WIDTH;
            }
        } else {
            if (tempH > MAX_HEIGHT) {
               tempW *= MAX_HEIGHT / tempH;
               tempH = MAX_HEIGHT;
            }
        }

        var canvas = document.createElement('canvas');
        canvas.width = tempW;
        canvas.height = tempH;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0, tempW, tempH);
        var dataURL = canvas.toDataURL("image/jpeg");


        var newImgs = new Image();
                newImgs.src = dataURL;

                document.body.appendChild(newImgs);


      }

   }
   reader.readAsDataURL(file);
}

Answer 1

对于“浏览器停止并有时崩溃”部分的麻烦...

确保使用 .onload 给图像加载时间：

var newImgs=new Image();
newImgs.onload=function(){
    document.body.appendChild(newImgs);
}
newImgs.src=dataURL;

注意 .onload 应该在 .src 之前声明

所以，在你的 tempImg 上也将 .onload 放在 .src 之前。

var tempImg = new Image();
tempImg.onload = function() {     
    ...
}
tempImg.src = reader.result;

至于放大缩略图时质量不佳，这是不可避免的。

您的缩略图只有很小的像素分辨率，放大尺寸总是会产生较差的效果。