De canvas a blob
Un blob es un objeto que almacena datos sin formato y no puede ser modificado ulteriormente.
El método toBlob
EL metodo toBlob() crea un objeto blob que almacena los datos básicos de una imagen contenida en un elemento <canvas>. El método toBlob() puede tomar hasta 3 argumentos:
canvas.toBlob(callback, mimeType, cualidad);
callback: el primer argumento representa una función de retrollamada (callback). Esta función toma como único argumento el blob resultante.
mimeType: argumento opcional que indica el tipo de imagen resultante. El valor por defecto de este argumento es image/png
la cualidad: Exactamente como en el caso de convertToBlob este argumento define la cualidad de la imagen, y puede tomar valores entre 0 y 1 Se utiliza si el type es image/jpeg o image/webp.
El siguiente ejemplo ( adaptado de HTMLCanvasElement.toBlob() ) demuestra cómo crear un ícono .ico utilizando el canvas de HTML5 y el método toBlob().
See the Pen canvas.toBlob by Gabi (@enxaneta) on CodePen.
El método convertToBlob
¡OJO!: El método convertToBlob funciona por ahora solo en Chrome.
Para crear un blob que almacena los datos básicos de una imagen contenida en un elemento <canvas> ( agregado o no al DOM ) podemos utilizar el método convertToBlob
El método convertToBlob toma como argumento un objeto con dos opciones:
const blob = canvasVirtual.convertToBlob({
type: "image/jpeg",
quality: 0.95
});type: Define el formato de la imagen resultante. El valor por defecto es image/png.
quality: Define la cualidad de la imagen, y puede tomar valores entre 0 y 1 Se utiliza si el type es image/jpeg o image/webp.
En el siguiente ejemplo voy a crear un elemento canvas virtual ( sin agregar el elemento al DOM). Dentro del canvas voy a dibujar algo: una rosa polar en este caso.
Ulteriormente voy a convertir la imagen del canvas en un blob. Esto devuelve una nueva promesa. Cuando ya tengo el blob then puedo utilizarlo (let _src = URL.createObjectURL(blob)) como atributo src de una imagen: img.src = _src, o en el CSS como imagen de fondo de un elemento HTML: bg.setAttribute("style",`background-image:url(${_src})`) .
See the Pen convertToBlob by Gabi (@enxaneta) on CodePen.