缩小 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 本身（无需使用 getImageData）绘制到较小的 canvas 上，绘制时按比例缩小：

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

缩小 canvas 元素然后获取 imageData

Downscale canvas element then get imageData

html

javascript

fabricjs