在Web前端开发中，Canvas提供了丰富的图像处理能力，其中drawImage负责将图像资源绘制到画布上下文，toDataURL则用于将画布内容序列化为Base64编码的图片数据。这两个方法如果配合不当，就会出现导出图像空白、模糊或者直接抛出异常的情况。本文围绕它们的正确用法展开，从绘制时机、跨域限制到格式选择逐一说明。
一、drawImage 的基本用法与常见误区
drawImage是CanvasRenderingContext2D对象的方法，主要作用是把图片、视频帧或者另一个画布的内容绘制到当前画布上。它有多种参数形式，最基础的是传入图像源和起始坐标，也可以指定目标宽高，或者截取源图像的部分区域再绘制。
一个常见的误区是开发者在创建Image对象后，没有等待其加载完成就调用drawImage。由于图片是异步加载的，此时image对象的complete属性为false，宽度高度都为0，drawImage虽然不会报错，但画布上不会留下任何像素。正确方式必须把绘制逻辑放在onload事件回调里。
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://ipipp.com/demo.jpg';
// 错误写法：图片还没加载完就画
// ctx.drawImage(img, 0, 0);
img.onload = function () {
// 正确写法：在 onload 中绘制
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
除了加载时机，drawImage还可以实现图像裁剪和缩放。比如只取源图左上角100x100区域绘制到画布指定位置，这种写法在制作头像缩略图时非常实用。需要注意的是，如果目标尺寸与源尺寸比例不一致，图像会被拉伸，必要时应先计算裁剪区域保持比例。
// 从源图 (50,50) 截取 100x100，画到画布 (0,0) 尺寸 150x150 ctx.drawImage(img, 50, 50, 100, 100, 0, 0, 150, 150);
二、toDataURL 的导出机制与跨域限制
toDataURL方法属于HTMLCanvasElement对象，调用时会把当前画布上的位图数据编码为Data URL字符串。默认格式是image/png，也可以指定image/jpeg以及质量参数。该方法在画布处于未污染状态时才能正常工作。
所谓画布污染，是指画布中绘制了来自其他域且未正确设置跨域许可的资源。一旦污染，toDataURL会抛出SecurityError。解决跨域问题需要服务器响应头包含Access-Control-Allow-Origin，同时前端在加载图片时设置img.crossOrigin='anonymous'。如果图片服务不支持跨域，那就无法导出该图片的画布数据。
const exportImg = new Image();
exportImg.crossOrigin = 'anonymous';
exportImg.src = 'https://ipipp.com/photo.jpg';
exportImg.onload = function () {
ctx.drawImage(exportImg, 0, 0);
try {
const dataUrl = canvas.toDataURL('image/png');
console.log(dataUrl.slice(0, 30));
} catch (e) {
console.error('导出失败：画布可能被污染', e);
}
};
在格式选择上，image/png支持透明通道，适合图标、带透明背景的合成图；image/jpeg体积更小，但不支持透明，透明区域会被填充为黑色。若导出jpeg，可以通过先铺一层白色背景再绘制来避免黑底问题。
// 导出 jpeg 前先填白底
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
const jpegUrl = canvas.toDataURL('image/jpeg', 0.92);
三、综合实践：截图与缩略图生成
结合drawImage和toDataURL，我们可以实现一个简单的图片缩略图生成器。用户选择本地文件后，通过FileReader读取为Data URL并赋给Image，加载完成后按比例绘制到固定大小的画布，最后导出新的Data URL用于预览或上传。
这种方案完全在客户端完成，不依赖后端处理，适合轻量场景。不过需要注意超大图片会占用较多内存，canvas尺寸也不宜超过浏览器限制，通常长宽乘积在几百万像素内是安全的。下面给出一个完整示例。
function makeThumbnail(file, maxSize, callback) {
const reader = new FileReader();
reader.onload = function (e) {
const image = new Image();
image.onload = function () {
let w = image.width, h = image.height;
if (w > h && w > maxSize) {
h = h * (maxSize / w);
w = maxSize;
} else if (h > maxSize) {
w = w * (maxSize / h);
h = maxSize;
}
const cvs = document.createElement('canvas');
cvs.width = w;
cvs.height = h;
const c = cvs.getContext('2d');
c.drawImage(image, 0, 0, w, h);
callback(cvs.toDataURL('image/jpeg', 0.8));
};
image.src = e.target.result;
};
reader.readAsDataURL(file);
}
通过上述代码可以看到，drawImage负责按计算后的尺寸绘制，toDataURL在绘制结束后立即导出，二者顺序严格依赖图片加载与绘制完成。只要遵循异步加载、跨域授权和格式适配三个原则，就能稳定运用这两个API完成各类图像处理任务。
四、注意事项总结
实际项目中还应留意设备像素比(devicePixelRatio)对清晰度的影响。在高分屏上，如果画布逻辑尺寸等于CSS尺寸，drawImage绘制的图像会显得模糊。此时应将画布实际宽高乘以devicePixelRatio，并用ctx.scale做适配。
另外，toDataURL是同步且可能阻塞主线程的操作，处理大画布时会有性能开销。若需要更高性能，可考虑toBlob配合异步回调来生成Blob对象，再用于上传或下载，避免超长Base64字符串占用内存。
// 使用 toBlob 替代 toDataURL 提升性能
canvas.toBlob(function (blob) {
const form = new FormData();
form.append('file', blob, 'shot.png');
// 此处可执行上传逻辑
}, 'image/png');