How to add an image in a HTML page using javascript ?
Examples of how to add an image in a HTML page using javascript:
Table of contents
Add an image using javascript
Let’s create a variable image with createElement («img»):
then indicate the name of the image (Note: if the image is not in the same directory as the html document, we can also specify the full path to the image for example ‘./path_to_img/matplotlib-grid- 02.png ‘):
and finally display the image in the html page
Sample code using this image
How to add an image in a HTML page using javascript ?
Change the style of the div element
You can then for example modify the style of the div containing the image with
How to add an image in a HTML page using javascript ?
Update the style of the image
You can also change the style of the image with
Example of code
How to add an image in a HTML page using javascript ?
References
Author
Benjamin
Greetings, I am Ben! I completed my PhD in Atmospheric Science from the University of Lille, France. Subsequently, for 12 years I was employed at NASA as a Research Scientist focusing on Earth remote sensing. Presently, I work with NOAA concentrating on satellite-based Active Fire detection. Python, Machine Learning and Open Science are special areas of interest to me.
Загружайте и добавляйте изображения в DOM с помощью JavaScript/jQuery
В этом посте мы обсудим, как загружать и добавлять изображения в DOM в JavaScript и jQuery.
1. Использование JavaScript
В чистом JavaScript вы можете использовать Image конструктор для программного создания изображения с необходимыми атрибутами и добавления его в DOM-контейнер с помощью Node.appendChild() метод.
2. Использование jQuery
С помощью jQuery вы можете динамически создавать новый элемент изображения и добавлять его в конец DOM-контейнера, используя метод .append() метод. Это показано ниже:
jQuery
Вот альтернативная версия с использованием appendTo() метод, аналогичный методу append() метод, но имеет другой синтаксис в отношении размещения содержимого и цели.
jQuery
Другим правдоподобным способом является использование jQuery .html() метод, как показано ниже:
jQuery
Это все, что касается загрузки и добавления изображений в DOM в JavaScript и jQuery.
Оценить этот пост
Средний рейтинг 4.79 /5. Подсчет голосов: 28
Голосов пока нет! Будьте первым, кто оценит этот пост.
Сожалеем, что этот пост не оказался для вас полезным!
Расскажите, как мы можем улучшить этот пост?
Спасибо за чтение.
Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.
Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования ��
Create Image Elements in JavaScript
In this JavaScript tutorial, you’re going to learn 14 common scenarios you’ll probably run into, if you have not already when working with images.
Show Image in Plain HTML
Create a static image tag with a src attribute with an image URL in the HTML file.
Exit fullscreen mode
output:
As you can see, I use the picsum website for demonstration purposes. It lets me get a random image URL with specific dimensions passed at the end of the URL.
Pretty straight forward right?
Let’s see how to set a src attribute dynamically via JavaScript next.
Set Src Attribute in JavaScript
In the HTML file, create an HTML image tag like so:
Exit fullscreen mode
In JavaScript, get a reference to the image tag using the querySelector() method.
Exit fullscreen mode
Then, assign an image URL to the src attribute of the image element.
Alternatively, you can set a src attribute to the image tag using the square brackets syntax like this:
Exit fullscreen mode
output:
Set Multiple Src Attributes in JavaScript
Let’s say you have three image elements in the HTML page in different parts.
Exit fullscreen mode
Using ID or class attribute, you can easily target each image element separately to set a different value to the src attribute which I will cover later in this chapter.
Let me show you what �� NOT to do when having multiple static image tags in your HTML page.
Exit fullscreen mode
In the previous example, I used the querySelector() method to target the image element which works fine for a single image element.
To get a reference to all three image elements, we’ll need to use querySelectorAll().
Exit fullscreen mode
This will get all of the image element references and create a Node List Array from them.
Exit fullscreen mode
This works fine, but there is a one problem with this approach.
Let’s say you no longer need the first image element and remove it from the HTML code.
The second and third image elements will end up having the first and second images.
Create Image Element in JavaScript
Create an image element using the createElement() method on the document object.
Then, set an image URL to its src attribute.
Exit fullscreen mode
Finally, add the image element to the DOM hierarchy by appending it to the body element.
Alternatively, you can use the Image() constructor which creates a new HTMLImageElement instance and it’s functionally is equivalent to document.createElement(“img”).
Optionally, you can pass width and height parameters to it.
Exit fullscreen mode
It will be equivalent to this in HTML:
Exit fullscreen mode
Add Inline Style to the Image in JavaScript
Using the style property, we can apply style to the image element directly in JavaScript.
As you can see in the example below, I’ve applied a border as well as border radius styles to it.
Exit fullscreen mode
Add ID Attribute to the Image in JavaScript
Adding multiple styles to the image element individually would be tedious.
Instead, let’s create a new CSS rule inside the style tags or an external CSS file with an ID selector like below.
Exit fullscreen mode
Then, assign it to the ID attribute of the image element using its ID property.
Exit fullscreen mode
As you know, it’s pretty straight forward as the value of the ID attribute should not be duplicated in a single page.
Alternatively, you can invoke the setAttribute() method on the img object with two arguments: the attribute name and the value.
Exit fullscreen mode
Add Class Attribute to the Image in JavaScript
Unlike ID attribute, you can add multiple class names in a single image element or the same class name in multiple image elements or combinations of both.
Let’s say we have a CSS rule with a class name called .img-rounded-border.
Exit fullscreen mode
Then, we can add this class to the image element using the add() method on the classList property passing the class name as an argument.
Top comments (0)
For further actions, you may consider blocking this person and/or reporting abuse
Использование изображений
До сих пор мы создавали наши собственные фигуры и применяли стили к ним. Одна из самых впечатляющих функций <canvas> это возможность использования изображений. Они могут быть использованы для динамического композитинга фото или как фоны графиков, для спрайтов в играх, и так далее. Внешние изображения могут быть использованы в любых поддерживаемых браузером форматах, таких как PNG, GIF, или JPEG. Вы можете даже использовать изображение, произведённое другими canvas элементами на той же странице как источник!
Импортирование изображений в canvas в основном состоит из 2 этапов:
- Дав ссылку на HTMLImageElement объект или для другого canvas элемента как источник. Также можно использовать изображение дав ссылку на URL.
- Для рисования изображения на canvas используется функция drawImage() .
Давайте посмотрим как это сделать.
Использование изображений для рисования
Canvas API может использовать все перечисленные далее типы данных как источник изображения:
Эти изображения созданы, используя конструктор Image() , также как все <img> элементы.
Используя HTML <video> элемент как источник изображения захватывает текущий кадр из видео и использует его как изображение.
Вы можете использовать другой <canvas> элемент как источник изображения.
Есть несколько способов, чтобы получить изображения для использования на холсте.
Использование изображений из той же страницы
Мы можем получить ссылку на изображение, на той же странице, на canvas с используя один из способов:
-
коллекция
- The document.getElementsByTagName() метод
- Если вы знаете id конкретного изображения, который вы хотите использовать, вы можете использовать document.getElementById () , чтобы получить это конкретное изображение
Использование изображений из других доменов
Использование crossorigin атрибута <img> элемент (отображается HTMLImageElement.crossOrigin (en-US) свойства), вы можете запросить разрешение на загрузку другого домена для использования в drawImage() . Если хостинг домен разрешает доступ к междоменному изображению, то изображение может быть использовано в вашем canvas без without tainting it;иначе он может испортить ваш canvas.
Использование других canvas элементов
Как и с обычными изображениями, мы можем получить доступ к другим canvas элементам используя либо document.getElementsByTagName() либо document.getElementById() метод. Проверьте, что в canvas источнике уже что-то нарисовано, прежде чем использовать его в целевом изображении canvas.
Одним из удобных способов было бы использование второго элемента canvas в качестве миниатюры другого большего изображения canvas.
Создание изображений с нуля
Другой способ это создать новые HTMLImageElement объекты в нашем скрипте. Чтобы это сделать, вы можете использовать удобный Image() конструктор:
Когда этот скрипт выполнится, изображение начнёт загружаться.
Если вы попытаетесь вызвать функцию drawImage() перед тем как изображение загрузится, то скрипт ничего не сделает (или, в старых браузерах, может даже выдать исключение). Поэтому вам необходимо использовать событие load, чтобы вы не пытались сделать это прежде, чем изображение загрузится:
Если вы используете только одно стороннее изображение, то этот метод может быть хорошим примером, но если нужно следить за несколькими изображениями, то необходимо придумать что-то более умное. Хотя поиски тактики проверки загрузки изображений выходят за пределы этого обучающего курса, вы должны об этом помнить.
Вложение изображения с помощью данных: URL
Другой возможный способ включить изображение это через data: url (en-US) . Data URLs позволяет вам полностью определить изображение как Base64 кодированную строку символов прямо в ваш код.
Одним из преимуществ data URLs это то что полученное изображение доступно сразу без других запросов туда-обратно на сервер. Другое потенциальное преимущество в том, что также можно инкапсулировать всё в одном файле все ваши CSS, JavaScript, HTML, и изображения, что делает его более портативным в других местах.
Некоторые недостатки этого метода в том что ваше изображение не кешировано, и для изображений с большим размером кодирование url может стать очень долгим процессом.
Использование кадров из видео
Вы также можете использовать кадры из видео представленных <video> элементом (даже если видео не видно). Например, если у вас есть <video> элемент с ID «myvideo», вы можете сделать:
Эта функция вернёт HTMLVideoElement объект для этого видео, который, как мы упоминали ранее, является одним из объектов, который можно использовать как CanvasImageSource .
Рисование изображений
Как только мы получили ссылку на источник объекта изображения, мы можем использовать метод drawImage() для включения его в canvas. Как мы увидим далее, метод drawImage() перегружен и у него есть несколько вариантов. В базовом варианте он выглядит как:
Рисует изображение, указанное в CanvasImageSource в координатах ( x , y ).
Примечание: SVG изображения должны указывать ширину и высоту корневого <svg> элемента.
Пример: Простой линейный график
В следующем примере, мы будем использовать внешнее изображение в качестве фона для небольшого линейного графика. Использование фонов может сделать ваш скрипт значительно меньше, потому что мы можем избежать необходимости писать код для создания фона. В этом примере мы используем только один образ, поэтому я использую обработчик событий изображения объекта загрузки для выполнения операторов рисования. drawImage() метод определяющий место фона с координатами (0, 0), которые привязаны к верхнему левому углу canvas.
Получившийся график выглядит так:
| Screenshot | Live sample |
|---|---|
 |
Изменение размеров
Второй вариант метода drawImage() добавляет два новых параметра и позволяет разместить изображение в canvas с изменёнными размерами.
Это добавляет параметр ширины и высоты, которые указывают до какого размера нужно изменить изображение при рисовании его в canvas.
Пример: Тайлинг изображения
В этом примере, мы будем использовать изображение в качестве обоев и повторим его в canvas несколько раз. Это может быть сделано просто через цикл, располагая изменённые изображения на разных позициях. В коде внизу, первый цикл for проходит по рядам. Второй цикл for проходит по колонкам. Изображение уменьшено на треть от реального размера, которое было 50×38 пикселей.
Примечание: Изображения могут стать размытыми, при большом увеличении или зернистыми при значительном уменьшении. Возможно, лучше всего не изменять размеры изображения, если на них есть текст, который должен остаться читаемым.
Получившийся рисунок canvas выглядит так:
| Screenshot | Live sample |
|---|---|
 |
Нарезка
У третьего и последнего варианта метода drawImage() в дополнении к источнику изображения есть ещё восемь параметров . Он позволяет нам вырезать кусок из изображения, затем изменить его размер и нарисовать его в canvas.
В данном изображении, эта функция берёт фрагмент из изображения, в виде прямоугольника, левый верхний угол которого — ( sx , sy ), ширина и высота — sWidth и sHeight и рисует в canvas, располагая его в точке ( dx , dy ) и изменяя его размер на указанные величины в dWidth и dHeight .
Чтобы понять что делает нарезка, можно посмотреть на изображение справа. Первые четыре параметра определяют местоположение и размер фрагмента исходного изображения. Последние четыре параметра определяют прямоугольник, в который будет вписано изображение на целевом рисунке canvas.
Нарезка может быть полезным инструментом, когда вы захотите сделать композицию. Вы могли бы собрать все элементы в одном файле изображения и использовать этот метод для создания композиции. Например, если вы захотите сделать график, вы могли бы сделать PNG изображение, содержащее все необходимые тексты в одном файле и в зависимости от ваших данных, могли бы достаточно просто изменять график. Другим преимуществом является то, что нет необходимости загружать каждое изображение по отдельности, получив возможность увеличить скорость загрузки.
Пример: Обрамление изображения
В этом примере, мы будем использовать того же носорога, что и в предыдущем примере, но мы отрежем его голову и включим её в рамку. Изображение рамки это 24-х битный PNG, который включает падающую тень. Так как в 24-х битные PNG изображения включается полный 8-ми битный альфа-канал, в отличие от GIF и 8-битных PNG изображений, он может быть помещён в любой фон, без беспокойства о матовом цвете.
В этот раз мы применили другой способ загрузки изображения. Вместо загрузки методом создания новых HTMLImageElement объектов, мы включили их как <img> тэги прямо в наш HTML файл и из них выбрали изображения. Изображения скрыты с помощью CSS-свойства display , установленного в «none» для этих изображений.
| Screenshot | Live sample |
|---|---|
 |
Скрипт, сам по себе, очень простой. Каждому <img> присвоен атрибут ID, который делает удобным их выбор с использованием document.getElementById() . Потом мы просто используем функцию drawImage() , чтобы из первого изображения вырезать фрагмент носорога и вставить его в canvas, затем рисуем рамку сверху, используя второй вызов функции drawImage() .
Пример галереи искусства
В последнем примере этой главы, мы построим небольшую галерею искусств. Галерея состоит из таблицы, включающей несколько изображений. Когда страница загрузится, <canvas> элемент вставится в каждое изображение, а вокруг будет нарисована рамка.
В этом случае, у каждого изображения фиксированная ширина и высота, такая же, как и у рамки нарисованной вокруг них. Вы могли бы усовершенствовать этот скрипт так, чтобы он использовал ширину и высоту изображения, чтобы рамка идеально его окружила.
Код ниже должен говорить сам за себя. Мы проходим циклом через document.images контейнер и соответственно добавляем новые элементы canvas. Возможно следует упомянуть для тех, кто не слишком хорошо знаком с DOM, что для этого используется Node.insertBefore метод. insertBefore() это метод родительского узла (ячейки таблицы) элемента (изображения) перед которым мы хотим вставить наш новый узел (элемент canvas).
И сюда какую-нибудь CSS для украшения:
Связывая все вместе JavaScript рисует наши изображения в рамках:
Контроль изменений размеров изображения
Как было отмечено ранее, изменение размеров изображений может привести к размытости или к шуму в процессе преобразования. Вы можете использовать контекст рисования imageSmoothingEnabled (en-US) свойства, чтобы контролировать использование сглаживающего алгоритма, когда изменяющиеся изображения в вашем контексте. Обычно это свойство установлено в true , означая, что изображения будут сглажены во время изменения размеров. Вы можете отключить это свойство так: