Canvas getImageData但缩小了

Question

我在一个尺寸为280x280的画布上绘制了一些东西。我想获得这个画布上尺寸为28x28的ImageData。

我不能直接这样做：

const imgData = this.ctx.getImageData(0, 0, 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);

但是两者都没有起作用。

- Jonas

Answer 1

您可以在第一个画布上绘制图像。

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

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

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

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

- enxaneta