如何將數據從一個畫布複製到另一個畫布

我有任意數量的畫布。一旦填寫完畢，我想將其複製到任何其他與之交互的畫布上。如何將數據從一個畫布複製到另一個畫布

我目前

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

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

那麼當未來一個負載（他們是在情態動詞）

我嘗試填充它像這

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

我得到這個錯誤

未捕獲

TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

是（ '畫布'）[0]錯誤的東西搶？我應該在canvas元素中獲得其他東西嗎？

謝謝！

來源

2017-03-18 Chuck Niddy

我敢打賭，你的'this'沒有指向你所期望 – Psi

這裏如果你能提供完整的代碼，而不是隻是件，我們也許能夠更好地幫助你。對我來說，這聽起來像'sourceCanvas'在調用drawImage時不在調用範圍之內或者不適用（該錯誤表示drawImage是CanvasRenderingContext2D，因此它似乎已被正確設置） – faboolous

-1

When one canvase is closed I save the canvas data

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>

來源

2017-03-18 05:48:12

如何將數據從一個畫布複製到另一個畫布

回答

相關問題