如何將數據從一個畫布復制到另一個畫布

Question

我有帶有任意數量的畫布的表格。 填寫完畢后，我想將其復制到與之交互的其他任何畫布上。

我目前有

當一個畫布關閉時，我保存畫布數據

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

然后在下一個加載時（它們是模態的）

我嘗試這樣填充

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

我收到此錯誤

未捕獲

TypeError：無法在'CanvasRenderingContext2D'上執行'drawImage'：提供的值不是'（CSSImageValue或HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）類型的值

（'canvas'）[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 個解決方案

解決方案1
0 2017-03-18 05:48:12

如何將數據從一個畫布復制到另一個畫布

問題描述

1 個解決方案

解決方案1 0 2017-03-18 05:48:12

解決方案1
0 2017-03-18 05:48:12