Tengo un script que recorta una imagen de la transmisión de video.

 let ctx = image.getContext("2d"); ctx.drawImage(results.image, croprect.x, croprect.y, croprectwidth, croprectheight, 0, 0, 300, 200);

En HTML

 <div id="image-div"> <canvas id="image" width="300" height="200"></canvas> </div>

Ahora necesito hacer alguna manipulación de procesamiento de imágenes con él. Hago 'Guardar como' para la prueba, pero ¿cómo hacerlo automáticamente?

Lo intenté

 const canvas = document.getElementById('image'); const dataURL = canvas.toDataURL(); console.log(dataURL);

En la consola, da una URL pero cuando la abro, es solo un rectángulo en blanco (blanco) (tamaño correcto 300x200) Quiero guardarlo en mi carpeta local y en el backend más tarde cuando el segundo paso (procesamiento de imágenes) del script funcionará.