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。如果有人可以帮助我，这将是非常棒的。

谢谢， Vaibhav的

Answer 1

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

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

Javascript客户端JPEG图像压缩

1 个答案: