Javascript客户端JPEG图像压缩答案

【问题标题】：Javascript Client Side JPEG image compressionJavascript客户端JPEG图像压缩
【发布时间】：2016-04-30 17:20:06
【问题描述】：

我想基本上压缩上传的图像（客户端），然后将 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。如果有人能帮我解决这个问题，那就太好了。

谢谢，毗婆娑

【问题讨论】：

标签： javascript image compression

【解决方案1】：

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

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

【讨论】：

如何在 toDataUrl 之前减小客户端大小的图像大小？
如果你给drawImage一个尺寸，我想它会缩小到那个尺寸。
但是画布会变小，图像尺寸会受到影响。不会吗？
是的，但这是目标，您需要使用toDataURL。
不，我们的目标只是降低我这里的质量。我能够为较小的文件实现它，但对于较大的文件则不行。