如何将一个画布的内容复制到另一画布

Question

我正在尝试将一个画布的内容复制到另一块为空的画布，但是当代码执行时，出现以下错误。

framework2-debug.js:1876 TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

我无法得到我的代码中的错误，有人可以帮我吗？

                var c = $("#imgCanvas");
                var ctx = c[0].getContext("2d");
                var img = $(this).find('canvas');
                ctx.drawImage(img, 10, 10);

Answer 1

你弄错了 ctx.drawImage不接受jQuery元素作为参数。

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

要么

var img = this.querySelector('canvas');

或者可以使用画布上下文的getImageData和putImageData方法：

var imgData = oldCanvas.getContext('2d').getImageData(0, 0, 100, 100);
newCanvas.getContext('2d').putImageData(imgData, 0, 0);

Answer 2

诀窍是：在第二个画布上绘制拳头画布元素作为图像。

 var img = new Image(); var c = document.getElementById('imgCanvas').getContext('2d'); var c2 = document.getElementById('imgCanvas2').getContext('2d'); img.onload = function() { c.drawImage(img, 0, 0); // HERE THE TRICK, Draw element as Image c2.drawImage(document.getElementById('imgCanvas'), 0, 0); } img.src = 'https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png'; 

 canvas { position:relative; width:48%; height:auto; float:left; } 

 <canvas id="imgCanvas"></canvas> <canvas id="imgCanvas2"></canvas>