Javascript 缩小画布元素的比例，然后获取imageData

我需要用户能够绘制画布元素，然后需要将其转换为长度为784的数组，以便将其输入到算法中。数组应该是像素阴影强度，我可以使用ctx.getImageData（）方法找到它。但是，由于用户需要绘制，画布元素是280x280，而不是所需的28x28，这意味着我需要缩小在280x280画布上绘制的图像的比例，然后使用getImageData

我尝试过从280x280图像数据数组中获取每100个值，但我不确定这是否真的有效，我一直在努力绘制结果数组，因此无法验证

var guess = document.getElementById('guess');
var canvasBig = document.getElementById('canvasBig');
var ctxBig = canvasBig.getContext('2d');
var canvasSmall= document.getElementById('canvasSmall');
var ctxSmall = canvasBig.getContext('2d');

var canvas = new fabric.Canvas('canvasBig', {
   isDrawingMode: true,
});
canvas.freeDrawingBrush.width = 50;

guess.addEventListener('click', function() {
  var imageData = ctx.getImageData(0,0, canvasBig.width, canvasBig.height)
  var resized = []
  for(var i = 0; i < imageData.length; i++){
    if(i % 100 == 0){
      resized.push(imageData.length)
    }
  }
  console.log(imageData)
  ctxSmall.putImageData(imageData, 0, 0)
});

var guess=document.getElementById（'guess'）；
var canvasBig=document.getElementById（'canvasBig'）；
var ctxBig=canvasBig.getContext（'2d'）；
var canvassall=document.getElementById（'canvassall'）；
var ctxSmall=canvasBig.getContext（'2d'）；
var canvas=new fabric.canvas（'canvasBig'{
isDrawingMode:true，
});
canvas.freeDrawingBrush.width=50；
guess.addEventListener（'click'，function（）{
var imageData=ctx.getImageData（0,0，canvasBig.width，canvasBig.height）
var resized=[]
对于（var i=0；i

您只需将较大的画布本身（无需使用

getImageData

）绘制到较小的画布上，即可在绘制时向下缩放：

---

ctxSmall.drawImage（canvasBig，0,0,280,280,0,0,28,28）

感谢您的回复，但我需要获取缩小图像的图像数据。对于这一部分，使用

getImageData

是合适的。