Копирование содержимого одного canvas в другой на JS
Быстрый ответ
Для переноса содержимого с одного холста на другой вам потребуется метод drawImage
. Вызовите контексты обоих холстов и проведите копирование, передав в метод исходный холст:
let srcCtx = sourceCanvas.getContext('2d');
let destCtx = destinationCanvas.getContext('2d');
destCtx.drawImage(sourceCanvas, 0, 0); // копирование содержимого в одну строку 😄
Такой способ позволяет скопировать все изображения с sourceCanvas
на destinationCanvas
, располагая их в левом верхнем углу холста. Обязательно проверьте, что исходный холст уже прорисован!
Глубже в drawImage
Метод drawImage
способен использовать HTMLCanvasElement в качестве источника изображения, что исключает необходимость промежуточных операций, улучшая при этом эффективность.
Добавлю, что drawImage
успешно работает не только с холстами, но и с HTMLImageElement и HTMLVideoElement.
Значимость скорости
Работа с холстом схожа с участием в стометровке. Здесь drawImage
выигрывает у объектов ImageData, демонстрируя более высокую производительность. Этот метод — ваше готовое решение при ограничениях памяти.
Визуализация
Представьте холсты как два проектора в кинотеатре.
Проектор 1 (🎥): Воспроизводит фильм 🎬🌟
Проектор 2 (🎥): Находится в ожидании ⏳
Копируем фильм на второй проектор:
🎥🎬🌟 ➡️ 🔄 ➡️ 🎥🎬🌟
# Комментатор: И оба проектора удостаиваются приза за лучший фильм!
Теперь оба проектора показывают один и тот же фильм:
Проектор 1 (🎥): 🎬🌟 Бесплатный киносеанс? 🎬🌟 Проектор 2 (🎥)
Это и ilлюстрирует процесс копирования содержимого холста.
Копирование содержимого холста с помощью toDataURL
и Image
Если необходимо передать содержимое холста между разными контекстами (например, из веб-воркера в основной поток), используйте метод toDataURL
.
Пример кода:
let dataURL = sourceCanvas.toDataURL();
let image = new Image();
image.onload = function() {
destinationCanvas.getContext('2d').drawImage(image, 0, 0); // Почтовый ящик холста 📨
};
image.src = dataURL;
Не приступайте к рисованию, пока не завершится загрузка изображения. toDataURL
создаст изображение в формате "image/png", сохраняя при этом прозрачность.
Попробуем альтернативные методы
drawImage
и toDataURL
— два классических метода для клонирования холста. Если вам нужно изменить размер или трансформировать копию, drawImage
предоставит эту возможность:
destCtx.drawImage(sourceCanvas, 0, 0, width, height); // Меняем размер без потери контента 🎳
Экспериментируйте с размерами и пропорциями для лучшего отображения.
Обратитесь к ресурсам и бенчмаркам
Стоит обратить внимание, что jsPerf является вершиной в сфере тестирования скорости: jsperf.com/copying-a-canvas-element. Также крайне полезной может быть функция context.canvas
для получения холста из контекста.
Полезные материалы
- <canvas>: Элемент холста графики – HTML: Язык разметки гипертекста | MDN — подробный обзор элемента Canvas от MDN Web Docs.
- HTML Canvas – W3Schools — основы работы с Canvas на W3Schools.
- html – Как скопировать содержимое одного холста на другой локально – Stack Overflow — мудрость коллективного разума Stack Overflow.
- CanvasRenderingContext2D: метод getImageData() – Веб API | MDN — знакомство с методом работы с ImageData на MDN.
- CanvasRenderingContext2D: метод drawImage() – Веб API | MDN — разбор метода отрисовки изображений на холсте.
- web.dev — изучение других аспектов виртуального мира, включая холсты и связанные с ними технологии.