Supporto di Canvas toBlob() aggiunto in Chrome 50

Paul Lewis

L'elemento canvas sta ricevendo un upgrade a partire da Chrome 50: ora supporta il metodo toBlob(). Questa è un'ottima notizia per chiunque generi immagini lato client e voglia, ad esempio, caricarle sul proprio server o archiviarle in IndexedDB per un uso 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);
}

L'utilizzo di toBlob() è fantastico, perché invece di manipolare una stringa codificata in base64 ottenuta da toDataURL(), ora puoi lavorare direttamente con i dati binari codificati. È più piccolo e tende a adattarsi a più casi d'uso rispetto a un URI dati.

Se ti stai chiedendo se puoi disegnare blob di immagini in un altro contesto della tela, la risposta è sì, assolutamente, in Firefox e Chrome. Puoi farlo con l'API createImageBitmap(), che sarà disponibile anche in Chrome 50.