HTML5 Canvas Compressions DataURL() 输出的尺寸比原始尺寸大[重复]答案

【问题标题】：HTML5 Canvas Compression's DataURL() outputing larger size than original [duplicate]HTML5 Canvas Compressions DataURL() 输出的尺寸比原始尺寸大[重复]
【发布时间】：2018-11-01 11:42:36
【问题描述】：

所以我已经紧密地实现了这个实现： 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 是否有一定的阈值来限制图片压缩？

【问题讨论】：

标签： javascript html5-canvas blob image-compression todataurl

【解决方案1】：

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

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

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

【讨论】：