Question

我的表格有任意数量的画布。一旦填写完毕，我想将其复制到与之交互的任何其他画布上。

我目前

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

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

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

我尝试像这样填充它

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

我收到此错误

未捕获

TypeError：无法执行＆＃39; drawImage＆＃39;上＆＃39; CanvasRenderingContext2D＆＃39;：提供的值不是类型＆＃39;（CSSImageValue或HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）＆＃39;

（＆＃39;画布＆＃39;）[0]抓错了吗？我应该在canvas元素中获得其他东西吗？

谢谢！

Answer 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>

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

1 个答案: