javascript - 缩小 Canvas 元素然后获取 imageData

Question

我需要用户能够绘制一个 Canvas 元素，然后需要将其转换为长度为 784 的数组，以便可以将其输入算法中。该数组应该具有像素阴影强度，我可以使用 ctx.getImageData() 方法找到它。但是，由于用户需要绘制它， Canvas 元素是 280x280 而不是所需的 28x28，这意味着我需要缩小在 280x280 Canvas 上绘制的图像，然后使用 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)
});

Answer 1

您可以简单地将较大的 Canvas 本身绘制到较小的 Canvas 上(无需使用 getImageData)，并在绘制时向下缩放:

ctxSmall.drawImage(canvasBig, 0, 0, 280, 280, 0, 0, 28, 28);