Подтвердить что ты не робот

Каковы возможные типы данных для функции canvas toDataURL()?

canvas.toDataURL(type, encoderOptions);

MDN описание параметра типа говорит следующее:

тип Дополнительно DOMString, указывающий формат изображения. Тип по умолчанию - image/png.

Мне еще нужно выяснить, что такое все типы, поскольку я пытаюсь оценить, что можно использовать в разных случаях.

Изменить: статья MSDN о toDataURL() тоже не помогает.


Я знаю о следующем:

  • image/png качество (параметры кодировщика), похоже, не влияет на выход
  • image/jpeg качество (параметры кодировщика) влияет на выход
  • image/webp качество влияет на выход. (Хром - только в соответствии с MDN).

Но после осмотра я не могу найти список возможных типов и их параметры кодировщика... это почти все, что я мог найти. Каковы другие возможности?

4b9b3361

Ответ 1

Поддержка браузером форматов вывода изображений в значительной степени зависит от реализации. Здесь самое релевантное предложение в жизненном стандарте WHATWG:

Пользовательские агенты должны поддерживать PNG ( "image/png" ). Пользовательские агенты могут поддерживать другие типы. Если пользовательский агент не поддерживает запрошенный тип, он должен создать файл в формате PNG.

требуется PNG; все остальные форматы являются необязательными. Это обычно объясняется в стандартном toDataURL описании:

canvas . toDataURL( [ type, ... ] )

Возвращает URL data: для изображения на холсте.

Первый аргумент, если предоставлен, управляет типом возвращаемого изображения (, например. PNG или JPEG). По умолчанию используется image/png; этот тип также используется, если данный тип не поддерживается. Другие аргументы относятся к типу и определяют способ создания изображения, как указано в таблице ниже.

Спецификация содержит таблицу, как указано выше, но она имеет только одну запись:

Аргументы для методов сериализации

Type          Other arguments
image/jpeg    The second argument, if it is a number in the range 0.0 to
                1.0 inclusive, must be treated as the desired quality level.
                If it is not a number or is outside that range, the user
                agent must use its default value, as if the argument had
                been omitted.

Итак, мы видим, что PNG явно требуется по умолчанию, и JPEG должен поддерживать аргумент качества, если браузер предпочитает поддерживать JPEG. В будущем я, кроме сообщества веб-стандартов, мог бы добавить больше записей в эту таблицу, чтобы указать стандартные аргументы для поставщиков, которые предпочитают поддерживать дополнительные типы изображений.

В спецификации предлагается протестировать поддержку браузера в любом конкретном формате (но, к сожалению, не для того, чтобы получить все поддерживаемые форматы, например, в виде списка):

При попытке использовать типы, отличные от "image/png" , авторы могут проверить, действительно ли изображение было возвращено в запрошенном формате, проверив, будет ли возвращенная строка начинаться с одной из точных строк "data:image/png," или "data:image/png;".

Есть еще одна заметка о дополнительной поддержке браузера:

Например, значение "image/png" означает создание PNG-изображения, значение "image/jpeg" означает создание изображения JPEG, а значение "image/svg+xml" означает создание SVG (что потребовало бы, чтобы пользовательский агент отслеживал, как генерируется растровое изображение, маловероятная, хотя и потенциально удивительная) функция.

Это явно оставляет огромный диапазон разрешенных форматов, но только один требуемый формат.

Независимо от того, поддерживает ли браузер определенный формат сериализации изображений, это зависит только от каждого браузера.

Ответ 2

В firefox исходный код, они, похоже, поддерживают:

  • PNG
  • JPEG
  • ico
  • ВМР

Chrome за исходный код, должен поддерживать:

  • WebP
  • PNG
  • JPEG
  • bmp

Internet Explorer современных версий, должен быть одинаковым для Firefox (скрещивание пальцев).

Если мне нужно проголосовать за доступные "на сегодняшний день" варианты, я поеду с: PNG, JPEG и BMP

Качество влияет на параметры:

  • JPEG, процент качества, где 0 - 0%, 0,5 - 50%, а 1 - 100%.
  • BMP, BPP, байты на пиксель (благодаря @apsillers для указания)