Використання зображень - інтерфейси веб api, mdn

Імпорт зображень в canvas в основному складається з 2 етапів:

  1. Давши посилання на. "> HTMLImageElement об'єкт або для іншого canvas елемента як джерело. Також можна використовувати зображення давши посилання на URL.
  2. Для малювання зображення на canvas використовується функція drawImage ().

Давайте подивимося як це зробити.

Використання зображень для малювання

Canvas API може використовувати всі перераховані таких типів даних як джерело зображення:

Ці джерела спільно іменовані по типу CanvasImageSource.

Є кілька способів, щоб отримати зображення для використання на полотні.

Використання зображень з тієї ж сторінки

Ми можемо отримати посилання на зображення, на тій же сторінці, на canvas з використовуючи один із способів:

  • document.images колекція
  • The document.getElementsByTagName () метод
  • Якщо ви знаєте id конкретного зображення, який ви хочете використовувати, ви можете використовувати document.getElementById (). щоб отримати це конкретне зображення

Використання зображень з інших доменів

Використання crossorigin атрибута - елемент HTML, призначений для опису зображень. "> елемент (відображається HTMLImageElement.crossOrigin властивості), ви можете запросити дозвіл на завантаження іншого домену для використання в drawImage (). Якщо хостинг домен надати їм доступ до междоменной зображенню, то зображення може бути використано в вашому canvas без without tainting it; інакше він може зіпсувати ваш canvas.

Використання інших canvas елементів

Як і зі звичайними зображеннями, ми можемо отримати доступ до інших canvas елементам використовуючи або document.getElementsByTagName () або document.getElementById () метод. Перевірте, що в canvas джерелі вже щось намальовано, перш ніж використовувати його в цільовому зображенні canvas.

Одним із зручних способів було б використання другого елемента canvas як мініатюри іншого більшого зображення canvas.

Створення зображень з нуля

Інший спосіб це створити нові. "> HTMLImageElement об'єкти в нашому скрипті. Щоб це зробити, ви можете використовувати зручний Image () конструктор:

Коли цей скрипт виконається, зображення почне завантажуватися.

Якщо ви спробуєте викликати функцію drawImage () перед тим як зображення завантажиться, то скрипт нічого не зробить (або, в старих браузерах, може навіть видати виняток). Тому вам необхідно використовувати подія load, щоб ви не намагалися зробити це перш, ніж зображення завантажиться:

Якщо ви використовуєте тільки одне стороннє зображення, то цей метод може бути хорошим прикладом, але якщо потрібно стежити за декількома зображеннями, то необхідно придумати щось більш розумне. Хоча пошуки тактики перевірки завантаження зображень виходять за межі цього навчального курсу, ви повинні про це пам'ятати.

Вкладення зображення за допомогою даних: URL

Інший можливий спосіб включити зображення це через data: url. Data URLs дозволяє вам повністю визначити зображення як Base64 кодовану рядок символів прямо в ваш код.

Деякі недоліки цього методу в тому що ваше зображення не кешувати, і для зображень з великим розміром кодувати url може стати дуже довгим процесом.

малювання зображень

Як тільки ми отримали посилання на джерело об'єкта зображення, ми можемо використовувати метод drawImage () для включення його в canvas. Як ми побачимо далі, метод drawImage () перевантажений і у нього є кілька варіантів. У базовому варіанті він виглядає як:

drawImage (image, x, y) Малює зображення, вказане в CanvasImageSource в координатах (x. y).

SVG зображення повинні вказувати ширину і висоту кореневого елемента.

Приклад: Простий лінійний графік

У наступному прикладі, ми будемо використовувати зовнішнє зображення в якості фону для невеликого лінійного графіка. Використання фонів може зробити ваш скрипт значно менше, тому що ми можемо уникнути необхідності писати код для створення фону. У цьому прикладі ми використовуємо тільки один образ, тому я використовую обробник подій зображення об'єкта завантаження для виконання операторів малювання. drawImage () метод визначає місце фону з координатами (0, 0), які прив'язані до верхнього лівого кута canvas.

Одержаний графік виглядає так:

Схожі статті