Question

所以我已经密切实施了这个实现： Use HTML5 to resize an image before upload

我有以下compressedImgURL：

compressedImageURL = canvas.toDataURL('image/jpeg', 0.8)

除了压缩它之外，我需要发送服务器不是在base64中，而是以jpeg形式发送。

我创建了这个util函数：

            const byteString = atob(compressedImageURL .split(',')[1])
            const mimeString = compressedImageURL .split(',')[0].split(':')[1].split(';')[0]
            const ab = new ArrayBuffer(byteString.length)
            const ia = new Uint8Array(ab)
            for (let i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i)
            }
            // construct the file object
            const bb = new Blob([ia], { type: mimeString })

我已经检查了2MB文件的图像，并且压缩似乎正在做它的工作（我可以看到，当我console.log(bb.size)时，我看到尺寸已经缩小了。）

然而，当我上传10MB的图像时，我发现它已经增加到19MB。

根据我的理解，base64实际上增加了30％的原始大小，但我认为添加压缩比（在这种情况下为0.8）会阻止它。

dataURL是否有限制压缩图像的某些阈值？

Answer 1

对于canvas.toDataURL，第二个参数是图像质量而不是压缩率。（见：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#Parameters）

实际的压缩率取决于图像本身，尽管一些快速搜索得出了这个答案：https://stackoverflow.com/a/26782154/6184972。另请注意，您正在使用的10MB图片可能已经过压缩，压缩率通常是指未压缩图片的大小。

由于压缩和质量之间的关系事先无法预测，一种可能的方法是降低质量，直到图像达到所需的大小。

HTML5 Canvas Compression的DataURL（）输出的尺寸比原始尺寸大

1 个答案: