canvas.toDataURL生成的JPEG数据URL无法用于drawImage，该换什么格式？

你遇到的错误和toDataURL()的格式无关——ctx.drawImage() 不接受字符串类型的参数，不管你用image/jpeg还是默认的image/png，直接传dataURL都会报错。它需要的是HTMLImageElement、HTMLCanvasElement这类对象，而不是纯字符串。

修正后的代码 #

你需要把dataURL赋值给一个新创建的Image对象，等图片加载完成后再调用drawImage：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 绘制初始矩形
ctx.beginPath();
ctx.rect(0,0, 100, 100);
ctx.fill();

// 获取dataURL（jpeg/png格式都可以，不影响后续绘制）
const test = canvas.toDataURL("image/jpeg");

// 清空画布
ctx.fillStyle = "white";
ctx.beginPath();
ctx.rect(0,0, 100, 100);
ctx.fill();

// 创建图片元素并加载dataURL
const img = new Image();
img.src = test;
// 必须等待图片加载完成后再绘制
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

关键说明 #

• 无论你用image/jpeg还是image/png生成dataURL，只要通过Image对象加载，都能被drawImage正常识别。
• 一定要监听onload事件：哪怕dataURL是本地生成的，浏览器仍会将其当作异步资源处理，不等待加载完成直接调用drawImage会导致绘制失败。

内容的提问来源于stack exchange，提问作者Golden Orange