Supporto di Canvas toBlob() aggiunto in Chrome 50

Paul Lewis

L'elemento canvas verrà aggiornato a partire da Chrome 50: ora supporta il metodo toBlob(). Questa è un'ottima notizia per chiunque generi immagini sul lato client e voglia, ad esempio, caricarle sul proprio server o archiviarle in IndexedDB per utilizzarle in 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() è ottimo perché, invece di manipolare una stringa con codifica Base64 che ottieni 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 di dati.

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