キャンバスgetImageDataとputImageData部分的に画像を読み込みます

Question

ここに私のコードです。

> var canvas = document.createElement('canvas'); 
> var context = canvas.getContext('2d'); 
> context.drawImage(image, 0, 0); 

これはうまくいきますが、以下のような画像データを別のキャンバスにコピーしても問題ありません。画像を部分的に読み込みます。

var canvas = document.getElementById('myCanvas'); 
var context1 = canvas.getContext('2d'); 
context1.putImageData(context.getImageData(0, 0, image.width, image.height), 0, 0); 

2つのキャンバスを作成して、このコードをうまく動作させましたが、イメージはありません。

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.fillStyle = "red"; 
ctx.fillRect(0, 0, 300, 300); 

var d = document.getElementById("myCanvas1"); 
var btx = d.getContext('2d'); 
var imgData = ctx.getImageData(0, 0, 300, 300); 
btx.putImageData(imgData, 0, 0); 

私が2つのキャンバスを作成するとうまく動作しますが、上記のように私はメモリキャンバスで使用していません。

私のHTMLファイルには、これを持っている：

<canvas id="myCanvas" width="960" height="960"></canvas> 
<canvas id="myCanvas1" width="960" height="960"></canvas> 

Answer 1

あなたはキャンバスを作成する場合は、手動で自分の幅を設定する必要があります。デフォルトのキャンバスサイズは300x150です。ここからHTMLCanvasElement。あなたはむしろCPUよりもピクセルを移動するためにGPUを使用する方法ではなくgetImageDataよりも別の使用drawImage、setImageDataに1つのキャンバスをコピーするには

var canvas = document.createElement('canvas'); 
var context = canvas.getContext('2d'); 
canvas.width = image.width; 
canvas.height = image.height; 
context.drawImage(image, 0, 0); 

Answer 2

：このような 何か。また、さまざまなFXのサイズを変更したり、トリミングしたり、適用したりすることもできます。

// create a copy of canvasSource 
// returns the newly created canvas. 
function copyCanvas(canvasSource){ 
    var canvasCopy = document.createElement("canvas"); 
    canvasCopy.width = canvasSource.width; 
    canvasCopy.height = canvasSource.height; 
    canvasCopy.getContext("2d").drawImage(canvasSource, 0, 0); 
    return canvasCopy; 
}