Уменьшить элемент холста, затем получить imageData - PullRequest
0 голосов
/ 28 октября 2019

Мне нужно, чтобы пользователи могли рисовать элемент холста, который затем нужно преобразовать в массив длиной 784, чтобы его можно было ввести в алгоритм. Массив должен иметь интенсивность затенения пикселей, которую я могу найти с помощью метода ctx.getImageData (). Однако, поскольку пользователь должен нарисовать его, элемент canvas равен 280x280 вместо требуемых 28x28, то есть мне нужно уменьшить масштаб изображения, нарисованного на холсте 280x280, а затем использовать getImageData.

Я пытался просто получить каждый100-е значение из массива данных изображения 280x280, но я не уверен, сработает ли это на самом деле, и я изо всех сил пытался нарисовать результирующий массив, чтобы я не мог проверить.

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)
});

1 Ответ

1 голос
/ 28 октября 2019

Вы можете просто нарисовать больший холст (без использования getImageData) на меньшем холсте, уменьшив масштаб при рисовании:

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

...