Estoy codificando una página web donde el usuario puede tomar una foto con la cámara de su teléfono, luego la imagen se procesará y almacenará en el servidor.
Estoy almacenando el contenido de la imagen en un <canvas> y lo muestro con la etiqueta <img> pero no sé cómo enviar esa información al servidor.
Lo resolví convirtiendo el contenido del lienzo en un blob y enviándolo al servidor con fetch:
someButton.onclick = (e) => { //some previous code canvas.toBlob(upload) } function upload(blob) { const form = new FormData(); form.append("img_name",blob) fetch("/path/to/api", { method:'POST', body:form, }, ).then(res => res.text()).then(resp => console.log(resp)) }Luego, el servidor trata el archivo según sea necesario.