Saya membutuhkan pengguna untuk dapat menggambar elemen kanvas yang kemudian perlu diubah menjadi larik dengan panjang 784 sehingga dapat dimasukkan ke dalam algoritme. Array harus memiliki intensitas bayangan piksel, yang dapat saya temukan dengan menggunakan metode ctx.getImageData(). Namun, karena pengguna perlu menggambarnya, elemen kanvas adalah 280x280, bukan 28x28 yang diperlukan, artinya saya perlu menurunkan skala gambar yang digambar pada kanvas 280x280, lalu gunakan getImageData.

Saya sudah mencoba mendapatkan setiap nilai ke-100 dari larik data gambar 280x280, tetapi saya tidak yakin apakah itu benar-benar berfungsi, dan saya telah berjuang untuk menggambar larik yang dihasilkan sehingga saya tidak dapat memverifikasi.

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)
});
0
AsianTemptation 28 Oktober 2019, 05:45

1 menjawab

Jawaban Terbaik

Anda cukup menggambar kanvas yang lebih besar itu sendiri (tanpa harus menggunakan getImageData) ke kanvas yang lebih kecil, memperkecil ke bawah saat Anda menggambar:

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

1
kshetline 28 Oktober 2019, 04:08