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);

我尝试了同样的方法，创建了两个画布，这个代码很好但没有图像。

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);

如果我创建两个画布，它可以正常工作，但不像上面我在内存画布中使用的那样。

我的HTML文件包含：

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

Answer 1

创建画布时，需要手动设置宽度。默认画布大小为300x150。从这里HTMLCanvasElement。像这样：

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

要将一个画布复制到另一个画布，请使用drawImage而不是getImageData，setImageData这样您将使用GPU移动像素而不是CPU。您还可以选择调整大小，裁剪和应用各种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;
}

Canvas getImageData和putImageData部分加载图像

2 个答案: