Javascript 客户端 JPEG 图像压缩

Question

我想基本上压缩上传的图像(客户端)，然后将 src 附加到我的 id(html)。函数代码如下:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            console.log("e.target.result",e.target.result);
            var imageEle = new Image();
            imageEle.src = e.target.result;
            imageEle.onload = function() {
                var cvs = document.createElement('canvas');
                cvs.width = imageEle.naturalWidth;
                cvs.height = imageEle.naturalHeight;
                var ctx = cvs.getContext("2d").drawImage(imageEle,0,0);
                var newImageData = cvs.toDataURL('image/jpeg',0.5);
                $('#uploadedImage').attr('src', newImageData);
            };
        };
        reader.readAsDataURL(input.files[0]);
    }
}

这应该可以正常工作，但发生的是处理后上传的图像似乎是一个黑框。现在我已经阅读了很多类似的问题，但是关于压缩我无法解决这个问题。这也适用于小于 500 Kb 的文件(jpeg 图像)，但对于 1 MB 以上的真实文件，它会提供一个黑框作为数据 uri。如果有人可以帮助我，那就太好了。

谢谢， 外婆

Answer 1

toDataURL 的使用有大小限制，请参阅 canvas.toDataURL() for large canvas对于类似的问题，以及服务器端代码的可能答案。

如果您受限于此客户端代码，则必须在使用 toDataURL 之前减小图像的大小。