如何将一个Canvas内容复制到另一个Canvas？遇drawImage类型错误求解决

这个错误的核心原因很明确：你传给drawImage的是jQuery对象，但CanvasRenderingContext2D.drawImage()需要的是原生DOM元素（比如HTMLCanvasElement），而不是jQuery包装后的对象，所以才会抛出类型不匹配的错误。

你的代码问题点 #

看这行关键代码：

var img = $(this).find('canvas');

$(this).find('canvas')返回的是一个jQuery集合对象，它只是把匹配到的canvas元素包装了一层，本身并不是原生的canvas元素，自然不被drawImage识别。

修正后的代码 #

var c = $("#imgCanvas");
var ctx = c[0].getContext("2d");
// 从jQuery对象中提取原生canvas元素
var sourceCanvas = $(this).find('canvas')[0];

// 先检查是否成功获取到canvas元素，避免找不到时出错
if (sourceCanvas) {
  ctx.drawImage(sourceCanvas, 10, 10);
} else {
  console.error("未找到目标canvas元素，请检查选择器是否正确");
}

关键说明 #

• $(selector)[0]：jQuery对象是类数组结构，通过索引[0]可以取出第一个匹配到的原生DOM元素（也就是你需要的canvas），也可以用$(selector).get(0)达到同样效果。
• 增加if (sourceCanvas)判断：如果$(this).find('canvas')没有找到任何元素，sourceCanvas会是undefined，这个判断能避免后续代码因为无效参数再次报错，让你的代码更健壮。
• 如果页面中有多个canvas，find('canvas')会返回多个元素，这时候你需要根据实际需求调整索引（比如[1]取第二个），或者给目标canvas加特定的class/id来精确选择。

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