Поддержка Canvas toBlob() добавлена ​​в Chrome 50

Paul Lewis

Начиная с Chrome 50, элемент Canvas получает обновление: теперь он поддерживает метод toBlob() ! Это отличная новость для всех, кто создает изображения на стороне клиента и хочет, скажем, загрузить их на свой сервер или сохранить в IndexedDB для будущего использования.

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

Использование toBlob() отлично, потому что вместо манипулирования строкой в ​​кодировке base64, которую вы получаете от toDataURL() , теперь вы можете напрямую работать с закодированными двоичными данными. Он меньше и подходит для большего числа случаев использования, чем URI данных.

Если вам интересно, можно ли рисовать изображения в другом контексте холста, ответ — в Firefox и Chrome — да, абсолютно! Вы можете сделать это с помощью API createImageBitmap() , который также доступен в Chrome 50.