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

Question

这个问题已经有答案了:

Downsizing image dimensions via pure JS leads to image size inflation (in bytes) (2 个回答)

已关闭 5 年前。

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

我有以下压缩的ImgURL:

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)

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

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