¿Cómo guardar un HTML5 Canvas como una imagen en un servidor?

Posteriormente a mirar en varios repositorios y sitios al final encontramos la respuesta que te enseñaremos pronto.

Solución:

Aquí hay un ejemplo de cómo lograr lo que necesita:

1. Dibujar algo (tomado del tutorial de lienzo)

2. Convierta la imagen del lienzo al formato de URL (base64)

   var dataURL = lienzo.toDataURL();

3. Envíalo a tu servidor a través de Ajax

    $.ajax(
      type: "POST",
      url: "script.php",
      data:  
         imgBase64: dataURL
      
    ).done(function(o) 
      console.log('saved'); 
      // If you want the file to be visible in the browser 
      // - please modify the callback in javascript. All you
      // need is to return the url to the file, you just saved 
      // and than put the image in your browser.
    );

3. Guarde base64 en su servidor como una imagen (Aquí se explica cómo hacer esto en PHP, las mismas ideas están en todos los idiomas. El lado del servidor en PHP se puede encontrar aquí):

Jugué con esto hace dos semanas, es muy simple. El único problema es que todos los tutoriales solo hablan de guardar la imagen localmente. Así es como lo hice:

1) Configuré un formulario para poder usar un método POST.

2) Cuando el usuario termine de dibujar, puede hacer clic en el botón “Guardar”.

3) Cuando se hace clic en el botón, tomo los datos de la imagen y los coloco en un campo oculto. Después de eso envío el formulario.

document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
document.forms["form1"].submit();

4) Cuando se envía el formulario, tengo este pequeño script php:

Creo que debería transferir la imagen en base64 a la imagen con blob, porque cuando usa la imagen base64, se requieren muchas líneas de registro o se enviarán muchas líneas al servidor. Con blob, solo es el archivo. Puedes usar este código a continuación:

dataURLtoBlob = (dataURL) ->
  # Decode the dataURL
  binary = atob(dataURL.split(',')[1])
  # Create 8-bit unsigned array
  array = []
  i = 0
  while i < binary.length
    array.push binary.charCodeAt(i)
    i++
  # Return our Blob object
  new Blob([ new Uint8Array(array) ], type: 'image/png')

Y código de lienzo aquí:

canvas = document.getElementById('canvas')
file = dataURLtoBlob(canvas.toDataURL())

Después de eso, puedes usar ajax con Form:

  fd = new FormData
  # Append our Canvas image file to the form data
  fd.append 'image', file
  $.ajax
    type: 'POST'
    url: '/url-to-save'
    data: fd
    processData: false
    contentType: false

---

Este código usa la sintaxis de CoffeeScript.

si desea utilizar javascript, pegue el código en http://js2.coffee

Ten en cuenta comunicar esta sección si te valió la pena.

---

---

Utiliza Nuestro Buscador