Можностей, предоставляемых веб-разработчикам


  •  Глава 5 ЗАПИСЬ В ФАЙЛ



жүктеу/скачать 5,47 Mb.
Pdf көрінісі
бет204/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   200   201   202   203   204   205   206   207   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

180  •  Глава 5
ЗАПИСЬ В ФАЙЛ
Вы создали произведение искусства, сравнимое по красоте с Сикстинской Мадонной? 
Хотите экспортировать свое творение и поместить на рабочий стол? Сохранить во мно-
жестве различных форматов? Без проблем! Все это предусмотрено в функциональности 
холста.
Элемент 

 (но не контекст 2D) поддерживает экспортирование текущего состояния 
холста в URL данных.
ЧТО ТАКОЕ URL ДАННЫХ?
Большинство браузеров поддерживают возможность считывания ресурсов, таких как изображе-
ния, в кодировке Base64  Веб-приложения, подобные Gmail, используют закодированные в Base64 
изображения в коде CSS; это уменьшает число запросов к серверу (хотя файл CSS становится 
больше из-за встраиваемых в него данных изображения)  Схема URL выглядит примерно так:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAK    и т  д 
Адрес начинается со слова 
data, затем указан тип mime, кодировка — base64, а после этого идут 
необработанные данные (объем которых приблизительно на 30% больше размера исходного 
изображения)  Необработанные (или сырые) данные — это то, что экспортируется из элемента 
холста  Браузеры умеют декодировать их, превращая в реальные ресурсы (к сожалению, это не 
относится к IE7 и предыдущим версиям IE)  Помимо этого, IE8 поддерживает URL данных длиной 
только до 32 Кбайт — и не стоит об этом забывать!
Экспортировать содержимое очень просто. У элемента холста есть метод 
toDataURL
, при 
вызове которого вы указываете нужный формат изображения. Спецификация холста 
требует только поддержки формата PNG, однако в браузерах может быть реализована 
поддержка и других типов. Например, Safari поддерживает GIF, PNG и JPG. При попытке 
получить URL данных неподдерживаемого формата TIFF вы получаете только букву «A», 
повторенную множество раз, и никакого 
data:<тип
 
mime>
. Opera поддерживает только 
PNG, причем при запросе данных JPG и GIF возвращает также данные в формате PNG, 
игнорируя требуемый формат файла. Старые версии Firefox (на Mac) поддерживают толь-
ко PNG, а для всех остальных типов данных возвращают ошибку (что, на мой взгляд, все 
же чрезмерно жестоко). Какой урок вы должны извлечь из этого? Получив URL данных, 
проверьте, что он начинается с 
data:<нужный
 
тип
 
mime>
, чтобы удостовериться, что вы 
действительно получили то, что запрашивали.
В следующем примере кода мы создаем простейший (уровня Hello, world!) рисунок и сразу 
же сохраняем его в формате PNG, перенаправляя браузер на сформированный URL данных:
var ctx = document.querySelector('canvas').
¬ getContext('2d');
ctx.fillStyle = 'rgb(0, 0, 255)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(10, 20, 50, 50); // маленький квадратик
window.location = ctx.canvas.toDataURL('image/png');
Наконец, 
toDataURL
 также принимает необязательный второй аргумент, который доступен 
только в случае, когда поддерживается экспортирование типа 
image/jpg
 с возможностью 
выбора уровня качества изображения. Допустимые значения аргумента — от 0.0 до 1, где 

Холст  •  181
единица обозначает высочайшее качество. Будьте осторожны, так как уровень качества 
влияет на размер итогового изображения и, как в нашем случае, на объем данных Base64, 
который генерирует метод 
toDataURL
.

жүктеу/скачать 5,47 Mb.

Достарыңызбен бөлісу:
1   ...   200   201   202   203   204   205   206   207   ...   232



©emirsaba.org 2024
әкімшілігінің қараңыз
    Басты бет
Lessons
Curriculum vitae
Documents