Javascript Canvas getImageData和putImageData部分加载图像

这是我的密码。我正在上传一张图片，并使用如下方式：

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

这很好，但是如果我像下面那样将imagedata复制到另一个画布上。它部分加载图像

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>

---

创建画布时，需要手动设置画布的宽度。默认画布大小为300x150。从这里开始。 大概是这样的：

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

---

要将一个画布复制到另一个画布，请使用

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

---

如果创建画布，则需要在中手动设置画布的宽度和高度code@MysterX我已经编辑了问题并添加了html文件内容。谢谢你的回复。我弄错了。@MysterX你能补充一下吗。所以我可以接受。在画布上添加高度和宽度是可行的。