Мне нужно, чтобы пользователи могли рисовать элемент холста, который затем нужно преобразовать в массив длиной 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)
});