Изображения в Canvas
Одна из особенностей элемента <canvas> — возможность использования изображений. Их можно применять для разных целей. Вы можете использовать внешние изображения в любом формате, поддерживаемом браузером (например, PNG, GIF или JPEG). В качестве источника также можно использовать изображение, созданное другими элементами canvas.
Импорт изображений в canvas состоит из двух шагов:
- Получите ссылку на другой элемент canvas или объект HTMLImageElement в качестве источника.
- Нарисуйте изображение на canvas с помощью функции drawImage().
В качестве источника изображения API canvas может использовать любой из следующих типов данных:
| Тип данных | Описание |
|---|---|
| HTMLImageElement | Изображения, созданные с помощью конструктора Image(), или любой <img> элемент. |
| SVGImageElement | Изображения, встроенные с помощью элемента <image>. |
| HTMLVideoElement | Элемент HTML <video> в качестве источника изображения захватывает текущий кадр из видео и использует его как изображение. |
| HTMLCanvasElement | В качестве источника изображения можно использовать другой элемент <canvas>. |
Все эти источники вместе объединяются под типом CanvasImageSource.
Существует множество способов получения изображений для использования в canvas.
Использование изображений с той же страницы
Вы можете получить ссылку на изображения на той же странице, что и canvas, используя один из следующих способов:
- Коллекция document.images
- Метод document.getElementsByTagName()
- Метод document.getElementById(), если вы знаете ID нужного изображения
Использование изображений с других доменов
Используя элемент <img> с атрибутом crossorigin="anonymous", вы можете запросить разрешение на загрузку изображения с другого домена. Если домен хостинга разрешает кросс-доменный доступ через заголовки CORS, вы можете использовать изображение в своем canvas без его «загрязнения».
Note Если вы нарисуете изображение с другого домена без правильной настройки CORS, canvas станет «загрязненным». Загрязненный canvas ограничивает доступ к его данным (например,
toDataURL()выдаст ошибку).
Использование других элементов canvas
Другие элементы canvas можно получить с помощью методов document.getElementById() или document.getElementsByTagName().
Встраивание изображения через data: URL
Data URL позволяют указать изображение в виде закодированной строки символов Base64 непосредственно в коде. Преимущество data URL заключается в том, что результирующее изображение доступно немедленно. Также возможно упаковать весь ваш CSS, HTML, JavaScript и изображения в один файл.
Однако есть и недостаток: изображение не кэшируется, а закодированный URL может быть слишком длинным для больших изображений.
Создание изображения с нуля
Вы также можете создать новый объект HTMLImageElement в своем скрипте. Для этого используйте конструктор Image():
Создание изображения с нуля
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = 'myImage.png';Загрузка изображения начинается, когда устанавливается src. Чтобы гарантировать, что drawImage() вызывается только после готовности изображения, используйте обработчик события onload.
Функция drawImage()
Как только ссылка на изображение исходного объекта доступна, вы можете использовать метод drawImage(). Этот метод имеет следующие варианты:
- drawImage(image, x, y),
- drawImage(image, x, y, width, height),
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight).
Базовая форма — drawImage(image, x, y).
В следующем примере мы используем метод document.getElementById() для получения ссылки на изображение, а затем функцию drawImage() для его отрисовки.
Пример отрисовки изображения с помощью функции drawImage():
Пример отрисовки изображения с помощью функции drawImage()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Image</h2>
<img id="photo" src="https://ru.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" />
<h2>Image with canvas:</h2>
<canvas id="exampleCanvas" width="240" height="225" style="border:2px solid #cccccc;">
Your browser doesn't support the canvas tag.
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("exampleCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("photo");
ctx.drawImage(img, 20, 20);
};
</script>
</body>
</html>DANGER
Изображения SVG должны определять ширину и высоту в корневом элементе <svg>.
Использование кадров из видео
Также возможно использовать кадры из видео, представленного элементом <video>, даже когда видео не видно. Например, если у вас есть элемент <video> с ID "videoCanvas", выполните следующие действия:
Пример отрисовки видео с помощью canvas:
Изображения в Canvas
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Video</h2>
<video controls id="videoCanvas" controls width="350" autoplay>
<source src="https://ru.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<h2>Canvas draws the current video:</h2>
<canvas id="exampleCanvas" width="310" height="190" style="border:1px solid #d3d3d3;">
Your browser doesn't support the canvas tag.
</canvas>
<script>
var v = document.getElementById("videoCanvas");
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var animId;
function drawFrame() {
ctx.drawImage(v, 5, 5, 300, 180);
animId = requestAnimationFrame(drawFrame);
}
v.addEventListener("play", function() {
animId = requestAnimationFrame(drawFrame);
}, false);
v.addEventListener("pause", function() {
cancelAnimationFrame(animId);
}, false);
v.addEventListener("ended", function() {
cancelAnimationFrame(animId);
}, false);
</script>
</body>
</html>Практика
Какие основные шаги необходимы для отрисовки изображения на Canvas в HTML?