Estoy tratando de predecir el dibujo realizado en el elemento de lienzo html con la ayuda de Teachable Machine tensorflow.js. Sin embargo, cuando intento predecir usando model.predict(image) me da el mismo resultado que [0.2351463884,0.76485371] . He intentado usar un elemento de imagen html y funciona bien. El problema es solo cuando uso el elemento de lienzo Html.
const URL = "https://teachablemachine.withgoogle.com/models/S5O-110Gl/"; let model, labelContainer, maxPredictions; // predict drawing on canvas when button is pressed document.getElementById('start').addEventListener('click', async function() { const modelURL = URL + "model.json"; const metadataURL = URL + "metadata.json"; // load the model and metadata // Refer to tmImage.loadFromFiles() in the API to support files from a file picker // or files from your local hard drive // Note: the pose library adds "tmImage" object to your window (window.tmImage) model = await tmImage.load(modelURL, metadataURL); maxPredictions = model.getTotalClasses(); var canvas = document.getElementById('myCanvas'); const prediction = await model.predict(image); console.log(prediction) });El algoritmo de TensorFlow probablemente no acepta canvas como fuente, solo elementos de image . Pero puedes volver a dibujar un lienzo en una imagen.
<canvas id="canvas" width="640" height="360"></canvas> let canvas = document.getElementById("canvas"); let image = new Image(); image.src = canvas.toDataURL(); document.appendChild(image);