canvas压缩图片的秘密

开篇

首先明确canvas只适合压缩大的图片，图片size过小并不能有什么用处。那么为什么size过小canvas并不能压缩呢

• 如果不压缩质量，经过canvas的图片变大了
• 图片在经过img标签的时候方向改变了
• 什么时候使用canvas压缩

我们来看看canvas toDataURL toBlob 方法

// 不压缩，原画质
canvas.toBlob(callback, "image/jpeg", {quality: 1});
canvas.toDataURL( "image/jpeg", {quality: 1});
复制代码

图片在经过canvas后变大了，口怕。我们对比了两组不同的数据,我们发现原始图片越大，变大的比例越小，如果一张图片越小经过canvas的图片变大的比例也就越大。那么为什么会这样呢

5.3M
5284528<6228026

229kb
229214<242046

60kb
60022<229214
复制代码

图片越小说明本身被压缩的越厉害，其中存在的空白像素点越多，进过drawImage绘制的时候，drawImage才不会去管空白像素，canvas本身绘制的是矢量图所以没有像素的概念࿰