La API de OffscreenCanvas permite trabajar con un canvas en JavaScript sin tener que usar un elemento <canvas> HTML.
Hoy te voy a enseñar cómo convertir ese OffscreenCanvas a una imagen codificada en base64, ya que este OffscreenCanvas no permite usar toDataURL.
OffscreenCanvas a base64
Como lo mencioné anteriormente, esta API no ofrece exportación directa como base64, pero sí ofrece la función asíncrona llamada convertToBlob que devolverá los bytes de ese canvas.
Una vez que tengamos el BLOB representando al canvas podemos usar FileReader para convertirlo a base64. El código queda como se ve a continuación:
const blob = await canvasFueraDePantalla.convertToBlob();
const reader = new FileReader();
reader.onloadend = () => {
// Aquí accedemos a reader.result
}
reader.onerror = () => { }
reader.readAsDataURL(blob);
Obtenemos el BLOB con convertToBlob, creamos un FileReader y leemos el blob como DataURL usando readAsDataURL. Cuando el reader termine, invocará a onloadend y podremos acceder a reader.result para obtener el OffscreenCanvas codificado en base64.