Me gustaría desarrollar una aplicación web en la que pueda escribir un número con el mouse y, a través del aprendizaje automático, el dígito escrito a mano se convierta en un valor digital. Uso Angular para esto y Tensorflow.JS para la IA.

Mi problema: dibujo en el navegador con un lienzo, pero tan pronto como intento convertir este lienzo en una matriz (o un tensor), solo obtengo 0 valores como salida, aunque se dibujó algo en el lienzo.

Mi código:

 ngOnInit(): void { this.loadModel(); this.canvas = document.getElementById('can'); this.context = this.canvas.getContext('2d', {preserveDrawingBuffer: true}); this.canvas.height = 150; this.canvas.width = 150; this.context.lineWidth = 5; //set the drawing line width to 10 this.context.lineCap = "round"; this.context.strokeStyle = "white"; //Eventlisteners this.canvas.addEventListener('mousedown', this.startPainting.bind(this)); //if the mouse is pressed in the canvas, the variable painting is set to true, so the program know that we are currently painting this.canvas.addEventListener('mouseup', this.endPainting.bind(this)); //if the mousepresse end, the variable painting is set to false, so the program know that the painting is finished this.canvas.addEventListener('mousemove', this.paint.bind(this)); //call function paint, if the mouse is moving } //Method if mouse pressed startPainting() { this.painting = true; } endPainting() { this.painting = false; this.context.beginPath() } paint(e: MouseEvent) { if (this.painting == false) { //if the mouse is not pressed, we are not painting, nothing is going to happen return; } var rect = this.canvas.getBoundingClientRect(); this.context.lineTo(e.clientX - rect.left, e.clientY - rect.top); this.context.stroke(); this.context.beginPath(); this.context.moveTo(e.clientX - rect.left, e.clientY - rect.top); this.context.stroke(); } clear() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height) } canvasToTensor() { let tensor = tf.browser.fromPixels(this.canvas) .resizeNearestNeighbor([28, 28]) .mean(2) .expandDims(2) .expandDims() .toFloat(). div(255.0); console.log(tensor.data()) }

Esa es la salida: Salida habitual

Lo del modelo no es importante, realmente solo me interesa cómo puedo convertir mi dibujo de lienzo sin obtener solo 0 valores. Si necesita más información, hágamelo saber. Estaría muy agradecido por cualquier sugerencia.