画布getImageData，但缩小了

Question

我在帆布上画了个尺寸为280,280的东西。我想从这张画布上得到ImageData，但尺寸是28，28。

我不能就这么做

const imgData = this.ctx.getImageData(0, 0, 28, 28);

因为28，28之后剩下的就会被切断。所以我尝试了这样的方法：

this.ctx.width = 28;
this.ctx.height = 28;
const imgData = this.ctx.getImageData(0, 0, 28, 28);
console.log(imgData);

还有这个

this.ctx.scale(0.1, 0.1);
const imgData = this.ctx.getImageData(0, 0, 28, 28);
console.log(imgData);

但两者都不起作用。

Answer 1

你在第一张画布上画你的画。

接下来，使用第一个画布作为图像，在28/28的第二个画布上绘制。

var img = document.querySelector("#canvas1");
ctx2.drawImage(img,0,0,28,28);

最后，从第二个画布中获取图像数据：

ctx2.getImageData(0,0,28,28)