javascript - Canvas getImageData 但按比例缩小

Question

我在大小为 280、280 的 Canvas 上画了一些东西。我想从此 Canvas 获取 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

您在第一个 Canvas 上绘制图像。

接下来您使用第一个 Canvas 作为图像在第二个 28/28 Canvas 上绘制。

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

最后您从第二个 Canvas 中获取图像数据:

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