A partir de Chrome 50, se actualizará el elemento lienzo: ahora admite el método toBlob()
. Esta es una excelente noticia para cualquier persona que genere imágenes en el cliente y quiera, por ejemplo, subirlas a su servidor o almacenarlas en IndexedDB para utilizarlas en el futuro.
function sendImageToServer (canvas, url) {
function onBlob (blob) {
var request = new XMLHttpRequest();
request.open('POST', url);
request.onload = function (evt) {
// Blob sent to server.
}
request.send(blob);
}
canvas.toBlob(onBlob);
}
Es genial usar toBlob()
, ya que en lugar de manipular una string codificada en base64 que obtienes de toDataURL()
, ahora puedes trabajar directamente con los datos binarios codificados. Es más pequeño y suele adaptarse a más casos de uso que un URI de datos.
Si te preguntas si puedes dibujar BLOB en otro contexto de lienzo, la respuesta es, en Firefox y Chrome, ¡sí, absolutamente! Puedes hacerlo con la API de createImageBitmap()
, que también llega a Chrome 50.