Dodano obsługę Canvas toBlob() w Chrome 50

Paul Lewis

Twitter Strona główna

W Chrome 50 ulepszamy element Canvas, który obsługuje teraz metodę toBlob(). To świetna wiadomość dla każdego, kto generuje obrazy po stronie klienta, który chce – na przykład – przesłać je na swój serwer lub zapisać w IndexedDB do wykorzystania w przyszłości.

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);
}

Używanie metody toBlob() jest bardzo przydatne, ponieważ zamiast manipulować ciągiem zakodowanym w standardzie base64 uzyskiwanym z usługi toDataURL(), możesz pracować z zakodowanymi danymi binarnymi bezpośrednio. Jest on mniejszy i pasuje do większej liczby przypadków użycia niż identyfikator URI danych.

Jeśli zastanawiasz się, czy możesz rysować bloby obrazów w innym kontekście kanwy, odpowiedź brzmi tak – w Firefoksie i Chrome – oczywiście! Możesz to zrobić za pomocą interfejsu API createImageBitmap(), który również dostępny jest w Chrome 50.