Какие браузеры (и версии) поддерживают метод Canvas.toBlob?

Question

Я работаю над минималистским проектом по созданию изображений, и мне нужно иметь возможность создавать изображения в браузере, которые в свою очередь используются на сервере.До сих пор метод Canvas.toDataUrl() удовлетворял наши потребности, но я только что узнал о методе Canvas.toBlob(), который был бы гораздо более удобным.

Похоже, что метод toBlob() является новым для спецификациинесколько месяцев (я не могу найти никакой прямой ссылки на то, когда он был добавлен).

Какие браузеры поддерживают toBlob и, что более важно, какие версии этих браузеров включали интеграцию метода?Кроме того, поддержка этой функции "глючит" или находится в разработке для каких-либо крупных браузеров?

ОБНОВЛЕНИЕ

Я задавал этот вопрос почти 8 лет назад.Я представил свой предыдущий проект, ожидая каких-либо обновлений о состоянии метода canvas.toBlob().Из того, что я могу найти в Интернете, реализация toBlob(), похоже, начинает использоваться в некоторых браузерах.

Я еще раз спрашиваю, насколько распространенным является метод canvas.toBlob() среди браузеров, которые начали интегрироватьHTML5 объект холста и какие версии этих браузеров были первыми, кто интегрировал эту поддержку?

Answer 1

По состоянию на Фев 2016 , эти браузеры поддерживают toBlob()

• Firefox 19
• Хром 50
• IE10 в качестве префикса msToBlob()

Обратите внимание, что этот ответ был изначально написан в 2011 году. Оригинальный ответ / изменения ниже.

---

toBlob() - это действительно новинка, и я бы не рекомендовал использовать его в потребительском приложении, если вы не можете явно попросить их использовать определенный браузер (или иначе контролировать среду).

toBlob() Был добавлен 12 мая и имеет ограниченную функциональность, как определено. Он не существует ни в Chrome, ни в Firefox, ни в IE9.

Стоит отметить, что Firefox имеет функционал mozGetAsFile

Пока еще не существует никакого обсуждения для его добавления в Chrome .

Обсуждение Firefox. Они решили подождать, пока спецификация станет более понятной, прежде чем попытаться реализовать.

Спецификация для toBlob() очень расплывчата, многие внутренние вопросы все еще не решены. Они даже не уверены, какие параметры разрешить для типичного toBlob() использования.

---

Обновление от 10 апреля 2012 г.

toBlob по-прежнему не пользуется поддержкой. Он до сих пор не существует ни в Chrome Canary (Nightly), ни в Firefox Nightly, ни в IE9.

Если вы хотите следить за обновлениями в Chrome star, то это:

http://code.google.com/p/chromium/issues/detail?id=67587

Если вы хотите следить за обновлениями в Firefox, подпишитесь на эту ошибку здесь:

https://bugzilla.mozilla.org/show_bug.cgi?id=648610

Обновление: По состоянию на 21 февраля 2016 г. .toBlob теперь работает в Chrome 50 (в настоящее время канарейка)

Answer 2

Существует отличная реализация JavaScript функции canvas.toBlob (), которая также включает в себя встроенную функцию FireFox mozGetAsFile ():

https://github.com/blueimp/JavaScript-Canvas-to-Blob

Answer 3

Если вам это нужно, этот js-файл реализует функцию toBlob в браузерах, которые ее уже не поддерживают: https://github.com/eligrey/canvas-toBlob.js

Здесь сообщение авторов и здесь расширенный исходный код.

Однако похоже, что даже эта библиотека не работает во всех браузерах, так как она

"для работы требуется поддержка BlobBuilder, которой нет во всех браузеры "

Answer 4

Прошло почти 8 лет с тех пор, как я впервые задал этот вопрос. Учитывая, что я все еще получаю поддержку, и этот вопрос часто находится в верхней части поисков Google, я решил дать обновление состоянию Canvas.toBlob(...) и его реализации.

Следующая таблица:

                   |             | Version Support 
                   | Version     | for 'Quality'
Browser            | Implemented | Parameter 
-------------------+-------------+-----------------
Android Webview)   |          50 |          50
Chrome (Desktop)   |          50 |          50
Chrome (Mobile)    |          50 | Unsupported 
Edge (Desktop)     | Unsupported | Unsupported 
Edge (Mobile)      | Unsupported | Unsupported 
Firefox (Desktop)  |          19 |          25
Firefox (Mobile)   |           4 |          25
Internet Explorer* |          10 | Unsupported 
Opera (Desktop)    |          37 |         Yes
Opera (Mobile)     |          37 | Unsupported 
Safari (Desktop)   |          11 | Unsupported 
Safari (Mobile)    | Unsupported | Unsupported 
Samsung Internet   |         5.0 | Unsupported 

* Internet Explore implements "msToBlob" rather than the "toBlob" function signature.

(Источник: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)

Answer 5

Плохо, что эта функция не продвинулась дальше, но приятно знать ее статус (спасибо Саймону).

Тем временем этот ответ обеспечивает отличный обходной путь для достижения сетевой эффективности двоичных загрузок за счет устранения переполнения строк dataUri в кодировке base64. Очевидно, что он поддерживается только последними браузерами, но если вы пишете расширение или готовы получить зависимость от передового браузера, это может быть хорошим вариантом.