在网页应用里，用户上传图片几乎是绕不开的功能。手机随手拍一张照片，原图往往有三五MB甚至更大，如果直接上传，不仅浪费流量，服务器存储压力也大，页面加载速度还会明显变慢。这时候在浏览器端用canvas做一次压缩，往往能把图片体积降到原来的十分之一左右，而且用户完全无感知。这篇文章就把canvas压缩图片的原理、方法、完整代码和常见坑点一次性讲清楚。
canvas压缩图片的基本原理
canvas压缩图片的核心思路其实很简单：把图片先绘制到canvas画布上，再把画布内容导出成新的图片文件。压缩主要来自两个方面，一是尺寸压缩，也就是把图片缩小绘制，像素总数变少了，文件体积自然就小了；二是质量压缩，导出JPEG格式时可以指定一个0到1之间的质量参数，值越低压缩率越高，画质损失也越大。
整个流程可以拆成五步：第一，通过input文件选择控件或拖拽拿到File对象；第二，用FileReader读取文件生成dataURL，或者用URL.createObjectURL生成临时地址，再交给Image对象加载；第三，等图片加载完成后，计算目标尺寸并把它绘制到canvas上；第四，调用canvas的toDataURL或toBlob方法导出压缩后的内容；第五，把结果封装成Blob或FormData用于上传。理解了这个流程，后面的代码就很好懂了。
需要说明的是，不同格式适合不同场景。照片类图片导出为JPEG压缩效果最好；带透明背景的图片必须用PNG或WebP，否则透明区域会变成黑色；如果浏览器支持，WebP格式在同等画质下体积比JPEG还小百分之二三十，是目前更优的选择。
等比缩放压缩的完整代码实现
下面是一段可以直接使用的压缩函数，核心是根据设定的最大宽高计算缩放比例，保证图片不会变形。代码里用了Promise封装，方便配合async/await使用。
function compressImage(file, maxWidth, maxHeight, quality) { return new Promise(function(resolve, reject) { var reader = new FileReader(); reader.onload = function(e) { var img = new Image(); img.onload = function() { var scale = Math.min(maxWidth / img.width, maxHeight / img.height, 1); var canvas = document.createElement('canvas'); canvas.width = img.width * scale; canvas.height = img.height * scale; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); canvas.toBlob(function(blob) { resolve(blob); }, 'image/jpeg', quality); }; img.onerror = reject; img.src = e.target.result; }; reader.onerror = reject; reader.readAsDataURL(file); }); }
调用方式也很简单：compressImage(file, 1000, 1000, 0.8).then(function(blob) { console.log(blob.size); })。其中maxWidth和maxHeight是允许的最大宽高，quality一般取0.7到0.85之间，肉眼几乎看不出画质差异，但体积能压缩到原图的三分之一以下。注意计算scale时要和1取最小值，避免小图被放大反而模糊。
toBlob和toDataURL该怎么选
这两个方法都能导出画布内容，但适用场景不同。toDataURL返回的是base64编码的字符串，可以直接赋值给img标签的src属性预览，但base64编码会让数据体积膨胀约百分之三十三，而且长字符串占用内存较大，不适合大图片处理。
toBlob则是生成二进制的Blob对象，体积没有膨胀，可以直接塞进FormData上传给服务器，也可以用URL.createObjectURL生成临时地址用于预览。处理上传场景时，强烈建议优先使用toBlob。需要注意toBlob是异步回调形式，如果不习惯回调，可以用Promise把它包装一层，用起来会更顺手。
另外还有一个细节，toBlob的第二个参数是MIME类型，第三个参数是质量，但质量参数只对image/jpeg和image/webp有效，对PNG是无效的，PNG本身是无损压缩，想要减小PNG体积只能靠缩小尺寸或者用第三方库做颜色量化。
常见问题与踩坑点汇总
第一个常见的坑是跨域图片。如果img.src指向其他域名的图片且没有设置crossOrigin属性，调用toDataURL或toBlob时会抛出 tainted canvas 异常，因为canvas被跨域内容污染后禁止导出。解决办法是给Image对象设置img.crossOrigin = 'anonymous'，同时对方服务器必须返回正确的Access-Control-Allow-Origin响应头，两个条件缺一不可。
第二个坑是透明背景变黑。默认绘制时不会问题，但如果导出为JPEG，透明像素会被填成黑色。解决方式有两种：导出为PNG或WebP保留透明通道，或者在绘制前先执行ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height);铺一层白底。
第三个问题是压缩后体积反而变大。这通常发生在原图本身压缩率已经很高的场景，比如一张100KB的JPEG，强行转成PNG导出，体积可能涨到500KB。所以压缩前先判断一下，如果压缩结果比原文件还大，就直接使用原文件上传，这是一个很实用的兜底策略。
第四个问题是某些手机上竖拍照片旋转90度。这是因为照片的EXIF信息记录了拍摄方向，而绘制到canvas时不会自动应用。现在的浏览器中，使用createImageBitmap(file)配合imageOrientation: 'from-image'选项可以正确处理，或者引入exif-js这类库手动读取方向信息再旋转画布。
进阶技巧与优化建议
如果追求更好的压缩效果，可以考虑两阶段压缩策略：先用canvas把尺寸缩小到两倍目标大小，导出后再压缩一次到目标尺寸，这样能减少高频细节带来的压缩噪声，画质会比一次性缩放更好，代价是多一次计算。
还可以根据图片体积动态决定压缩力度。比如小于500KB的图片只做轻微质量压缩，大于2MB的先缩尺寸再压质量，这样小图不会过度失真，大图也能有效瘦身。上传前记得检查blob.size，与原图比较后择优使用。
最后，如果对兼容性要求不高，可以把输出格式换成image/webp，同样的质量参数下体积更小。对于需要兼容老旧浏览器的项目，检测toBlob对webp的支持也很简单：生成一个1x1的webp canvas导出，看返回的MIME类型是否为image/webp即可。掌握这些方法后，绝大多数前端图片压缩需求都能从容应对了。
canvas压缩图片图片压缩前端图片处理修改时间：2026-09-14 09:10:41