Se agregó compatibilidad con Canvas toBlob() en Chrome 50

Paul Lewis

Twitter Página principal

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.