HTML5 Canvas 压缩 DataURL() 输出比原来更大的尺寸

Question

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

我有以下 compressedImgURL：

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

除了压缩之外，我需要以 jpeg 格式而非 base64 格式发送服务器。

我制作了这个 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）

实际压缩率取决于图像本身，尽管一些快速搜索得出了这个答案：。另请注意，您使用的 10MB 图片可能已被压缩，压缩率通常指的是未压缩图片的大小。

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

HTML5 Canvas 压缩 DataURL() 输出比原来更大的尺寸

HTML5 Canvas Compression's DataURL() outputing larger size than original

javascript

html5-canvas

blob

image-compression

todataurl