JavaScript 客户端 JPEG 图片压缩

Question

我希望能够压缩上传的图片（客户端），然后将其src附加到我的html id上。以下是该函数的代码：

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]);
    }
}

这应该是可以正常工作的，但事实上处理后上传的图像似乎变成了黑色方块。我已经阅读了许多类似的问题，但与压缩相关的问题我无法解决。此外，对于真实的文件（JPEG 图像）小于 500 KB 的情况下效果不错，但对于超过 1 MB 的文件，会生成一个数据 URI 的黑盒子。如果有人能帮助我解决这个问题就太好了。

谢谢， Vaibhav

- Vaibhav Magon

Answer 1

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

如果你只能使用客户端代码，那么在使用 toDataURL 之前必须先减小图像的尺寸。

- Ilya

---

如果您为 drawImage 指定一个尺寸，它会将图像缩小到该尺寸。 - Ilya

但是画布会变小，图片大小也会受到影响。不是吗？ - Vaibhav Magon

是的，但这就是目标，如果需要使用 toDataURL。 - Ilya

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Vaibhav Magon

不，缩放并不能解决问题。我仍在寻找更好的解决方案。 - Vaibhav Magon