如何将数据从一个画布复制到另一个画布答案

【问题标题】：How to copy data from one canvas to another如何将数据从一个画布复制到另一个画布
【发布时间】：2017-03-18 13:48:12
【问题描述】：

我有带有任意数量画布的表单。填写完成后，我想将其复制到与之交互的任何其他画布上。

我目前有

当一个画布关闭时，我会保存画布数据

sourceCanvas = $(this).find('canvas')[0];

然后当下一个加载时（它们处于模态）

我尝试像这样填充它

var destCtx = $(this).find('canvas')[0].getContext('2d');
destCtx.drawImage(sourceCanvas, 0, 0);

我收到了这个错误

未捕获

TypeError: 无法执行'drawImage' 'CanvasRenderingContext2D'：提供的值不是类型 '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

('canvas')[0] 是不是抓错了？我应该在画布元素中得到其他东西吗？

谢谢！

【问题讨论】：

我敢打赌你的this 没有指向你期望的地方
如果您能提供完整的代码而不是只提供部分代码，我们或许能更好地帮助您。在我看来，sourceCanvas 听起来像是在调用 drawImage 时超出了范围或类似情况（错误说 drawImage 是 CanvasRenderingContext2D，所以它似乎已正确设置）

标签： javascript jquery html canvas

【解决方案1】：

当一个画布关闭时，我会保存画布数据

sourceCanvas = $(this).find('canvas')[0];

我认为您的代码没有访问源画布中的图像数据。在源画布的上下文中调用getImageData()，然后在目标画布的上下文中调用putImageData() . 下面是一个简单的示例，它将图像数据从 canvas1 复制到 canvas1（在不同的位置进行说明）和 canvas2。

另外，请在HTML5 Canvas 上查看这篇出色的文字。

<html>
<body>

<canvas id="canvas1" width="300" height="150" style="border:1px solid #f00;">no canvas</canvas>

<canvas id="canvas2" width="300" height="150" style="border:1px solid #00f;">no canvas</canvas>


<script>
var c1 = document.getElementById("canvas1");
var c2 = document.getElementById("canvas2");
var ctx1 = c1.getContext("2d");
var ctx2 = c2.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(10, 10, 50, 50);

function copy() {
    var imgData = ctx1.getImageData(10, 10, 50, 50);
    ctx1.putImageData(imgData, 10, 70);
    ctx2.putImageData(imgData, 10, 70);
}
</script>

<button onclick="copy()">Copy</button>

</body>
</html>

【讨论】：