Помимо векторной графики (контуры, линии и прочее), прикладной интерфейс объекта Canvas поддерживает также растровые изображения. Метод
drawImage
копирует в холст пикселы из исходного изображения (или из прямоугольной области исходного изображения), выполняя операции масштабирования и вращения, если они необходимы.
Метод
drawImage
может вызываться с тремя, пятью или девятью аргументами. Во всех случаях в первом аргументе ему передается исходное изображение. Часто в этом аргументе передается элемент
<img>
или неотображаемый объект
Image
, созданный с помощью конструктора
Image.
Однако точно так же в первом аргументе можно передать другой элемент
<canvas>
или даже элемент
<video>.
Если методу
drawImage
передать элемент
<img>
или
<video>,
который к этому моменту еще не завершил загрузку изображения, он ничего не скопирует.
При вызове с тремя аргументами во втором и третьем аргументах методу
drawImage
передаются координаты X и Y верхнего левого угла области, в которую должно быть скопировано изображение. В этом случае в холст будет скопировано изображение целиком. Координаты X и Y будут интерпретироваться как координаты в текущей системе координат, поэтому при необходимости изображение будет масштабировано или повернуто.
При вызове метода
drawImage
с пятью аргументами к аргументам с координатами X и Y, описанным выше, добавляются ширина и высота. Эти четыре аргумента определяют прямоугольную область внутри холста. Верхний левый угол исходного изображения будет помещен в точку (х.у), а правый нижний - в точку (x+width, y+height). Опять же в холст будет скопировано изображение целиком. Прямоугольная область назначения определяется в текущей системе координат. Эта версия метода выполнит масштабирование изображение, чтобы уместить его в отведенную область, даже если к исходной системе координат не применялось преобразование масштабирования.
При вызове метода
drawImage
с девятью аргументами ему передаются координаты и размеры области в исходном изображении и области в холсте, и он скопирует только указанную область исходного изображения. В аргументах со второго по пятый указываются координаты и размеры прямоугольной области в исходном изображении. Они измеряются в пикселах CSS. Если исходное изображение представлено другим элементом <canvas>, координаты и размеры исходного изображения будут измеряться в системе координат по умолчанию и никакие преобразования, применявшиеся к системе координат исходного холста, учитываться не будут. В аргументах с шестого по девятый указываются координаты и размеры области в текущей (а не по умолчанию) системе координат, куда будет скопирован указанный фрагмент изображения.
Пример 21.9 демонстрирует простой случай применения метода drawImage. В нем используется версия метода с девятью аргументами, чтобы скопировать фрагмент холста, увеличенный и повернутый, обратно в тот же самый холст. Как видно на рис. 21.15, изображение было увеличено достаточно, чтобы проявилась его растровая структура и можно было наблюдать полупрозрачные пикселы, которые использованы для сглаживания краев линии.
Пример 21.9, Использование метода drawlmagef)
// Нарисовать линию в верхнем левом углу
с.moveTo(5,5);
с. ПпеТо(45,45);
с.lineWidth = 8;
с.lineCap = "round";
с.stroke;
// Определить преобразование системы координат
с.translate(50,100);
с. rotate(-45*Math.PI/180); // Разгладить линию
с. scale(10,10); // Увеличить ее, чтобы были видны отдельные пикселы
0, 0, 50, 50); // область назначения: преобразованная
Помимо возможности копировать изображение в холст, имеется также возможность извлекать содержимое холста в виде изображения с помощью метода
toDataURL.
В отличие от других методов, описанных выше, метод
toDataURL
– это метод самого элемента
Canvas
, а не объекта
CanvasRenderingContext2D
. Обычно метод
toDataURL
вызывается без аргументов и возвращает содержимое холста как PNG-изображение, закодированное в виде строки в формате URL
data:.
Возвращаемая строка URL подходит для использования в элементе
<img>,
благодаря чему можно создать статический снимок холста, как показано ниже:
var img = document.сreateElement("img”); // Создать элемент <img>
img.src = canvas.toDataURL; // Установить его атрибут src
document.body.appendChild(img); // Добавить элемент в документ
Все броузеры в обязательном порядке поддерживают формат PNG изображений. Некоторые реализации могут также поддерживать другие форматы, и вы можете указать желаемый MIME-тип в необязательном первом аргументе в вызове метода
toDataURL.
Подробности смотрите в справочном разделе книги.
Существует одно важное ограничение, связанное с безопасностью, о котором следует знать, планируя применять метод
toDataURL.
Чтобы предотвратить утечку информации между доменами, метод
toDataURL
не работает с элементами
<canvas>,
имеющими «неясное происхождение». Считается, что холст имеет неясное происхождение, если в него вставлялось изображение (непосредственно, вызовом метода
drawImage,
или косвенно, с помощью метода
CanvasPattern
), имеющее происхождение, отличное от происхождения документа, содержащего элемент
<canvas>
.
21.4.13. Композиция
При рисовании линий и текста, заливке областей или копировании изображений может получиться так, что новые пикселы будут накладываться сверху на уже существующие в холсте. При рисовании непрозрачных пикселов они просто будут замещать уже имеющиеся пикселы. Но при рисовании полупрозрачных пикселов новые («исходные») пикселы будут объединяться (комбинироваться) со старыми («целевыми») пикселами так, что старые пикселы будут видны сквозь новые, с учетом степени прозрачности этих пикселов.