Элемент canvas получает обновление с выходом Chrome 50: теперь он поддерживает метод toBlob ().
Это отличная новость для тех, кто создает изображения на стороне клиента, загружает их на свой сервер или сохраняет в IndexedDB для будущего использования.
С помощью toBlob() это большое обновление, потому что вместо манипулирования строкой в кодировке base64, которую вы получаете toDataURL()Теперь вы можете работать с закодированными двоичными данными напрямую. Он меньше и «имеет тенденцию соответствовать большему количеству вариантов использования», чем URI данных.
Вы можете отрисовывать большие изображения в другой контекст холста, используя API createImageBitmap, который также подходит для Chrome 50.
Как пользоваться
toBlob Метод является асинхронным, поэтому ожидает функцию в качестве первого параметра. Эта функция получает в качестве первого параметра элемент blob:
function imageToServer(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);
}
window.onload = function(){
document.getElementById("send").addEventListener("click",function(){
var canvas = document.getElementById("canvas");
imageToServer(canvas,"/a-service-to-process-the-image");
},false);
};
Предыдущий код сгенерирует большой двоичный объект изображения, который будет отправлен в службу URL, которая будет обрабатывать большой двоичный объект.
Важное замечание: Вы можете протестировать эту функцию с Chrome Canary, поскольку последняя версия Chrome — 49 до даты, и эта функция будет доступна только для Chrome 50.
