He estado luchando con esto por un tiempo, pero déjame explicarte el contexto primero.

Estoy desarrollando un 'Personalizador de productos' muy simple usando Javascript vainilla para un comerciante de Shopify.

Puedes comprobarlo aquí

El cliente carga una imagen, la imagen se representa en el lienzo HTML y luego se coloca donde se desee.

Necesito enviar la imagen resultante de Canvas al comerciante.

Intenté agregar un blob de lienzo al formulario de Shopify como este

 let dataURI = canvas.toDataURL(); let blob = dataURItoBlob(dataURI); let formData = document.querySelector('#shopify-form'); formData.append('file', blob);

Y nada...

Así que intenté usar la API de carga del lado del cliente de Cloudinary siguiendo este tutorial de YouTube .

y se me ocurrió esto, enviando la solicitud con axios:

 addToCartBtn.addEventListener('click', function (e) { // e.preventDefault(); dataURI = canvas.toDataURL(); let blob = dataURItoBlob(dataURI); let formData = new FormData(); formData.append('file', blob); formData.append('upload_preset', cloudinaryConfig.preset) axios({ url: cloudinaryConfig.api, method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(function (res) { console.log(res); }).catch(function (err) { console.error(err); }) })

Entonces, cuando el cliente hace clic en el botón Agregar al carrito, la imagen del lienzo se puede cargar en Cloudinary.

Pero da como resultado un 400 - Solicitud incorrecta , claramente me estoy equivocando en alguna parte. Por favor ayuda.

En resumen, necesito ayuda para enviar la imagen de lienzo a través de un pedido de Shopify o cargarla en Cloudinary (o cualquier otro administrador de medios).

Gracias por adelantado.