Descubre mas acerca del nuevo metodo toBlob en los canvas.

El elemento canvas se actualizará con el próximo Chrome 50: ahora es compatible con el método toBlob().

Esta es una gran noticia para cualquiera que genere imágenes en el lado del cliente, cárguelas en su servidor o almacénelas en IndexedDB para uso futuro.

Usar toBlob() es una gran actualización, porque en lugar de manipular una cadena codificada en base64 de la que obtiene toDataURL(), ahora puede trabajar con los datos binarios codificados directamente. Es más pequeño y "tiende a adaptarse a más casos de uso" que un URI de datos.

Puede dibujar blobs de imágenes en otro contexto de lienzo utilizando la API createImageBitmap que también vendrá para Chrome 50.

Cómo utilizar

El método toBlob es asíncrono, por lo que espera una función como primer parámetro. Esta función recibe como primer parámetro el elemento blob:

<canvas id="canvas" width="200" height="200" style="border:1px solid #000000;"><input type="button" value="Enviar imagen al servidor" id="send"/>

<script>
function imageToServer(canvas, url) {

  function onBlob (blob) {
    var request = new XMLHttpRequest();
    request.open('POST', url);
    request.onload = function (evt) {
      // Blob enviado al servidor
    }

    request.send(blob);
  }

  canvas.toBlob(onBlob);
}

window.onload = function(){
  document.getElementById("send").addEventListener("click",function(){
      var canvas = document.getElementById("canvas");
      imageToServer(canvas,"/un-servicio-que-procesa-la-imagen");
  },false);
};

</script>

El código anterior generará un blob de imagen que se enviará a un servicio de URL que procesará el blob.

Importante: puede probar esta función con Chrome Canary, ya que la última versión de Chrome es la 49 hasta la fecha y esta función solo estará disponible para Chrome 50.


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores