Canvas getImageData 和 putImageData 部分加载图像答案

【问题标题】：Canvas getImageData and putImageData load image partiallyCanvas getImageData 和 putImageData 部分加载图像
【发布时间】：2021-12-04 19:33:34
【问题描述】：

这是我的代码。我正在上传图片并像这样使用：

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

【问题讨论】：

如果您创建画布，您需要在代码中手动设置它们的宽度和高度
@MysterX 我已经编辑了问题并添加了 html 文件内容。感谢您的回复。我弄错了。
@MysterX 您可以将其添加为有效的答案。所以我可以接受。向画布添加高度和宽度有效。

标签： javascript html canvas

【解决方案1】：

要将一个画布复制到另一个画布，请使用 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;
}

【讨论】：

【解决方案2】：

当您创建画布时，您需要手动设置它们的宽度。默认画布尺寸为 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);

【讨论】：