前端 Canvas（HTML5 <canvas>）图片处理会遇到的问题
前端 Canvas（HTML5 <canvas>）图片处理会遇到的问题
这里指 HTML
<canvas>，不是 Canva 可画。Canvas 是浏览器里的位图绘图 API，本质是像素画板，和图片、跨域、清晰度、性能坑非常多。
一、图片跨域（最经典大坑）
Tainted canvas污染画布
- 如果图片域名和当前页面不同源，图片直接 drawImage 画到 canvas 后，canvas 被标记污染画布。
- 现象：调用
canvas.toDataURL()/getImageData()直接报错，无法导出图片、读取像素。 - 解决：图片服务器配置
Access-Control-Allow-Origin；图片加上crossorigin="anonymous"；使用同域图片或者 CORS 代理。
⚠️ 本地打开 html（
file://协议）也会触发跨域报错。
二、清晰度模糊问题（高分屏 DPR）
- 设备像素比
window.devicePixelRatio >1（Retina 屏），canvas 画布 css 尺寸和实际像素尺寸不一致，画面文字、图片发虚。
// 常见修复思路
const dpr = window.devicePixelRatio;
canvas.width = 宽度 * dpr;
canvas.height = 高度 * dpr;
canvas.style.width = `${宽度}px`;
canvas.style.height = `${高度}px`;
ctx.scale(dpr, dpr);
- 坑点：很多人只设置 css 宽高，不修改 canvas 本身 width/height 属性，导致拉伸模糊。
三、图片加载时序问题
new Image() 是异步加载，直接执行 drawImage 经常画空白。
const img = new Image();
img.src = 'xxx.jpg';
// ❌ 错误：图片还没加载完就绘图
ctx.drawImage(img,0,0);
// ✅ 正确：onload后绘图
img.onload = ()=>{ ctx.drawImage(img,0,0) }
坑：缓存图片可能不触发 onload；需要处理onerror捕获图片加载失败。
四、drawImage 裁剪、缩放变形
drawImage(img, sx,sy,sw,sh, dx,dy,dw,dh) 参数多，很容易参数顺序写反，出现：
- 图片被压扁拉伸
- 裁剪区域错位
- 超出画布部分不会自动渲染
五、toDataURL /blob 导出的坑
- 质量参数仅对 JPG 有效：
toDataURL('image/jpeg', 0.9)，png 第二个参数无效。 - 大图片导出会卡顿，甚至浏览器崩溃；toDataURL 返回 base64 字符串体积巨大，内存占用高。
推荐优先用
canvas.toBlob()，生成 Blob 再生成 File，性能更好。
- 导出图片颜色轻微偏差：canvas 是位图，部分图片色彩会丢失。
六、像素操作 getImageData /putImageData
- getImageData 拿到的是
Uint8ClampedArray，RGBA 顺序，4 个值对应 1 个像素。 - 性能很差：大图（比如 4000×4000）读取像素会非常慢，阻塞主线程，页面卡死。
- 不能操作污染画布的像素（跨域图片）。
七、合成、透明、混合问题
- globalCompositeOperation 混合模式，浏览器之间渲染效果有差异
- 半透明叠加多次，会有灰边、锯齿
- 线条、图片边缘锯齿：可以开启抗锯齿
ctx.imageSmoothingEnabled = true（部分浏览器前缀）
八、内存泄漏
canvas 不会自动释放位图内存：
- 频繁创建大量 canvas、Image 对象，不销毁，长时间页面会越来越卡
- 隐藏 canvas 不会自动释放，需要手动清空
ctx.clearRect()，置空引用
九、移动端特有问题
- 移动端高 DPR，画布尺寸过大容易渲染失败、黑屏（浏览器最大纹理限制，一般单 canvas 上限大概 8192px，不同手机不一样）
- 触摸坐标计算麻烦：需要把 touch 坐标从 css 坐标映射到 canvas 内部像素坐标
- 部分低端机 imageSmoothing 图片平滑失效
十、其他常见问题
- 文字渲染：
fillText文字锯齿、字体加载异步导致文字不显示（需要等字体加载完成document.fonts.ready） - 旋转平移：
rotate/translate是状态栈，忘记 save/restore 会导致坐标系错乱 - 动画：高频 requestAnimationFrame 绘制，如果绘图逻辑太重，掉帧
✅ 快速选型判断
- 简单裁剪、加水印、图片压缩：Canvas 够用
- 大量像素滤镜、实时大图处理：推荐 WebWorker + OffscreenCanvas（注意兼容性）
- 复杂图像算法：可以考虑 WebGL/Three.js
浙公网安备 33010602011771号