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.
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.
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-blobUna 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.
<!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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...