Книга: JavaScript. Подробное руководство, 6-е издание

21.4.12. Изображения

21.4.12. Изображения

Помимо векторной графики (контуры, линии и прочее), прикладной интерфейс объекта 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); // Увеличить ее, чтобы были видны отдельные пикселы
// С помощью drawlmage скопировать линию
с.drawlmage(c.canvas,
        0, 0, 50, 50, // исходная область: непреобразованная
        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>.

Оглавление книги