[英]How to copy content of one canvas to another canvas
我正在嘗試將一個畫布的內容復制到另一塊為空的畫布,但是當代碼執行時,出現以下錯誤。
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);
你弄錯了 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);
訣竅是:在第二個畫布上繪制拳頭畫布元素作為圖像。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.