Crear un blob a partir de un canvas

  • Por
Cómo crear un blob a partir del contenido de un elemento canvas, con Javascript compatible con todos los navegadores.

En el día a día del trabajo con imágenes generadas mediante el elemento Canvas llegará un momento que quieras usar el contenido, la imagen, en otros contextos además de verse en el propio navegador. Una de las alternativas posibles, crear un Blob, es la que vamos a cubrir en este artículo.

Un Blob es un objeto de Javascript en el que tenemos datos en crudo (raw data), siendo inmutable. Los objetos File, también de Javascript son un tipo de blob. Diversas API de Javascript, estándares del navegador o APIs de terceros, esperan recibir blobs para proveer de información llegada desde diversos puntos, como un archivo que traes desde una URL, una imagen generada al vuelo con un Canvas, etc.

Generar un blob desde un canvas es algo automático, con un simple método del objeto canvas, pero no funciona en todos los navegadores, por lo que tienes que usar además un polyfill. Veremos todo esto a continuación.

Nota: En mi caso, y para que sirva de ejemplo, la primera vez que los he necesitado usar es porque el API de Storage de Firebase requiere de un File o un Blob para subir contenido al espacio de almacenamiento.

Generar un blob con el API del elemento canvas

Lo más cómodo y directo es que generes tu blob a partir del método toBlob() del elemento canvas.

El método toBlob() recibe tres parámetros:

  • Una función callback que se ejecutará cuando el blob se haya producido. Esta función recibe el blob que se acaba de generar.
  • Un tipo de imagen que quieras generar, opcional, siendo "image/png" de manera predeterminada.
  • El factor de calidad del fichero, un número entre 0 y 1. Este parámetro es obligatorio en caso que estés produciendo un archivo de tipo "image/jpeg".
var canvas = document.getElementById("micanvas");
canvas.toBlob(function(blob) {
	//aquí la variable blob contiene el blob que se acaba de generar
});

Es tan sencillo como eso, sin embargo nos encontraremos con el problema que a día de hoy ese método no está implementado en todos los navegadores. De hecho, solo funciona completamente bien en Firefox en el momento de escribir este artículo. Chrome no tiene soporte, aunque ya se ha aprobado el estándar por lo que esperamos que se pueda usar en breve. Internet Explorer a partir del 10 ya dispone del método, pero no produce todavía archivos JPG.

Polyfill para generar el blob a partir del canvas canvas-to-blob

La solución para extender el soporte de generación de objetos blob en la mayoría de los navegadores pasa por instalar un polyfill en tu proyecto.

Nota: Ya debes saber que un polyfill es una librería que ofrece soporte a características que todavía no se ofrecen de manera nativa en todos los navegadores.

La librería que he usado con éxito para producir el blob a partir del canvas se llama canvas-to-blob. La encuentras en https://github.com/blueimp/JavaScript-Canvas-to-Blob

La puedes instalar por cualquier gestor de dependencias en tu proyecto, o descargar los archivos y copiar en tu proyecto de manera manual. Yo la he obtenido mediante Bower:

bower install --save canvas-to-blob

Una vez la tengas, puedes incluir el script necesario:

<script src="../../bower_components/canvas-to-blob/js/canvas-to-blob.min.js"></script>

Una vez instalado tu script, podrás generar los blob a partir de los elementos canvas, de la misma manera que lo haces mediante el API nativa, tal como hemos visto anteriormente.

Ejemplo completo de generación del blob desde el canvas

En el siguiente ejemplo tienes la creación de un blob con formato JPG, generado a partir de un canvas en el que hemos dibujado un simple rectángulo.

Nota: Puedes aprender a dibujar en un Canvas en el Manual de Canvas. Sus aplicaciones son muy amplias.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Usando canvas to blob</title>
</head>
<body>
  
  <canvas id="micanvas" width="300" height="250"></canvas>
  <br>
  <button id="generarblob">Generar blob</button>

  <script src="bower_components/canvas-to-blob/js/canvas-to-blob.min.js"></script>
  <script>
  var canvas = document.getElementById("micanvas");
  //dibujo alguna cosa
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#c08030';
  ctx.fillRect(20,20,95,200);

  document.getElementById('generarblob').addEventListener('click', function() {
    //genero un blob del canvas
    canvas.toBlob(function(blob) {
      console.log('Este es el blob: ', blob);
    }, 'image/jpeg', 0.8);
  })
  </script>
</body>
</html>

Como ves, tenemos un botón que, haciendo clic sobre él, se realiza la generación del objeto blob. No hacemos nada en especial con ese blob, esa parte ya depende de tus necesidades concretas, solo lo mostramos por consola. Al ver el objeto en la consola podrás observar su tamaño, que variará dependiendo de la calidad que le asignes al jpg que se va a producir.

Como has visto, crear un blob a partir de un canvas es una tarea bastante sencilla. Esperamos que te sirva.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Duilio Restuccia

14/2/2017
Leer blob
Que bien Miguel. Agradezco y felicito la sencillez y claridad de exposición.
Consulta: cómo puedo leer una imagen previamente generada en un canvas y guardada con la función del ejemplo?

Qué sitio, de preferencia en español, me recomiendas para profundizar en el uso de imágenes con canvas.

Saludos.