Как вывести картинку в javascript

Как вывести картинку в javascript

Любопытно, что вывод с помощью свойства innerHTML можно осуществить и без идентификатора по коду document.body.innerHTML = img При этом скрипт должен располагаться в body.
Свойство id.style.display

Этот метод целесообразно использовать при выводе и удалении картинки с задержкой. В коде картинки (в стиле) нужно указать идентификатор (id=»brum»), а также задать размеры картинки и сделать ее невидимой (display: none). Вывод осуществляется по коду brum.style.display =’block’ &ltimg src=’1.jpg’ style=’display: none; width:300; height:200’&gt &ltscript&gt function BGB() < setTimeout('brum.style.display ="block"',600) setTimeout('brum.style.display ="none"',4600) >&lt/script&gt &ltbody&gt &ltp align=left&gt&ltinput type=»button» value=»смотри» style=’width:70; height:35; border:2px solid red’ onclick=»BGB()»&gt

Метод document.getElementById Следующий скрипт содержит вывод изображения с помощью метода document.getElementById &ltp &gt&lt/p&gt &ltscript&gt function WGG() < qq="&ltimg src='2.jpg' style='width:300; height:200'&gt " document.getElementById("tik").innerHTML=qq >&lt/script&gt &ltbody&gt &ltinput type=»button» value=»get» style=’width:50; height:35; border:2px solid red’ onclick=»WGG()»&gt Нажмите кнопку. Открывшееся окно закрывается автоматически по коду setTimeout(«location.reload()»,2000).

Еще один способ вывести картинку с помощью getElementById. В коде вывода вместо innerHTML можно использовать src. В этом случае картинка с помощью getElementById выводится по коду: document.getElementById(‘tak’).src=»http://data5r.narod.ru/18.jpg» В целом скрипт выглядит так &ltp img style=»display: none; width:300; height:200″&gt&lt/p&gt &ltscript&gt function WGS() < tak.style.display ='block' document.getElementById("tak").src="http://data5r.narod.ru/18.jpg" setTimeout('location.reload()',2000) //убираем рисунок через 2 секунды >&lt/script&gt &ltbody&gt &ltinput type=»button» value=»щелкни» onclick=»WGS()»&gt

Как в код document.getElementById(«id») ввести сразу несколько идентификаторов. Если по коду document.getElementById(«id») нужно вывести сразу несколько идентификаторов, то вместо записи нескольких однотипных строчек с разными идентификаторами в круглых скобках можно ограничиться всего одной. Ниже представлен скрипт по выводу на экран и скрытию двух групп картинок, причем вывод и скрытие происходят в разное время. &lthead> &ltstyle> img < margin-left:30px; float:left; display: none; width:300; height:200; >&lt/style> &ltscript> x=[‘im1′,’im2’, ‘im3’ ] z=[‘im4′,’im5’, ‘im6’ ] t=500 function WW(x) < for (i = 0; i &ltbody>&ltimg src=»http://data5r.narod.ru/3.jpg» style=’border: 6px solid red’> &ltimg src=»http://data5r.narod.ru/17.jpg» style=’border: 6px solid red’> &ltimg src=»http://data5r.narod.ru/19.jpg» style=’border: 6px solid red’>&ltBR> &ltimg SRC=»18.jpg» style=’border: 6px solid yellow; margin-top:35px’> &ltimg SRC=»15.jpg» style=’border: 6px solid yellow; margin-top:35px’> &ltimg SRC=»14.jpg» style=’border: 6px solid yellow; margin-top:35px’> Пояснения к скрипту Группы идентификаторов задаются как массивы x=[‘im1′,’im2’, ‘im3’ ] первые три картинки z=[‘im4′,’im5’, ‘im6’ ] вторые три картинки Чтобы в коде каждого изображения не перечислять его атрибуты (размеры, его исходное, скрытие) используется внутренний стиль &ltstyle> img < margin-left:30px; float:left; display: none; width:150; hight:100; >&lt/style> Функция WW() отображает изображения, а функция WD() скрывает их. Для второй (и последующих групп, если они будут) идентификаторов коды отображения и скрытия предельно короткие t=1500; setTimeout(«WW(z)»,t) t=5500; setTimeout(«WD(z)»,t) Задержка позволяет выводить рисунки группами в разное время и совершать над ними действия (например, убирать через какое-то время с экрана)

Источник

Объект Image в JavaScript

Для работы с изображениями в JavaScript используется объект Image. Данный объект является очередным свойством объекта Document. И о том, как управлять изображениями через JavaScript, Вы узнаете из этой статьи.

Прежде чем начать обрабатывать изображение необходимо его создать. Разумеется, создание происходит в HTML, поэтому знакомый Вам тег:

Теперь мы можем обратиться к этому объекту через JavaScript:

ВНИМАНИЕ: Необходимо соблюдать очень важное правило: нельзя обращаться к тому, чего ещё не существует. Какой вывод из этого можно сделать? Очень простой: пока не создано изображение, его нельзя обрабатывать. То есть Вы не можете запустить приведённый здесь скрипт ДО того, как появилось изображение. На это очень часто напарываются новички, поэтому не забывайте, что прежде чем работать с чем-либо, необходимо для начала это создать.

Теперь переходим к свойствам. Начнём со свойства border. Данное свойство отвечает за размер рамки вокруг изображения. Разумеется, мы его можем и прочитать, и записать. Давайте изменим размер рамки нашего изображения:

Разумеется, есть два свойства, отвечающие за ширину и высоту изображения. Это свойства width и height объекта JavaScript. Давайте их выведем:

Теперь поясню, как работает данный скрипт. Сначала мы описываем саму функцию. Создаётся переменная flag. Это некий флаг, который переключается при смене изображения. Дальше идёт функция changeImage(), которая и занимается сменой изображения. Изображению присваивается тот путь к картинке, которому соответствует флаг. После смены изображения меняется и значение флага (чтобы в следующий раз было другое изображение). За пределами скрипта создаётся форма с одной кнопкой. Здесь обратите внимание на атрибут «onClick«. Этот атрибут отвечает за обработку события «Клик мыши по кнопке«. О событиях мы поговорим отдельно, но здесь достаточно понять принцип. В значении атрибута «onClick» стоит функция, которую надо выполнить при нажатии на кнопку. Таким образом, у нас и меняется изображение. Надеюсь, что понятно объяснил.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 31 ):

У меня не получается, у меня вместо картинки в таблицах двух, типо инпута такое «Рисунок» в двух. Можете помочь чем-нибудь?

Ладно разобрался уже.

Блин, и пришёл же такой набор слов в голову))))

У меня не работает последний на странице скрипт. Видимо, по причине того, что из тела скрипта не работает ссылка на изображение. Ссылка на изображения работает только из кода html вне скипта. Еще подскажите, пожалуйста, где почитать как внутри языка Java в ссылках на изображения подниматься на папку вверх (если картинки лежат не в одной папке с html-файлом).

Чтобы работало изображение, надо указывать правильно путь. Если скрипт находится в другом месте (например, в какой-нибудь папке), то путь будет совсем другим. А про Java на данном сайте ничего вообще нет, никогда не было и вряд ли будет.

Что касается подъёма вверх по папкам, то он аналогичен подъёму вверх в HTML, то есть «../».

По поводу языка Java вот хороший ресурс. http://javarush.ru/ Сделано по принцыпу комикса, но зато как и на этом сайте: от простых вещей постепенно к более сложным

Обязательно ли заключать input в форму?

Нет, но лучше так не делать.

Здравствуйте, Михаил. Подскажите, можно ли использовать в качестве свойства src строковую переменную? Спасибо.

src и подразумевает только строку.

я имел ввиду имя переменной, то есть например часть кода: st = ‘image/’ + ‘1.jpg’; document.img.scr = st; уже разобрался, понял что можно. не получилось с первого раза, потому что писал имя переменной в кавычках. вопрос другой возник, правда не подходит для этого топика. как вывести на «экран» переменную полученную в javascript в html. (знаю что не понятно, но как смог сформулировал 🙂 ) Например переменную st=’ыыы’ нужно вписать в бе-бе-бе- чтобы получилось: бе-бе-бе-ыыы Как это сделать?

st=»бе-бе-бе»; st = st + «ыыы»;

не правильно поняли. как вывести переменную st в блоке span.

Спасибо, теперь понял.

Привет, Михаил! по поводу переключения картинок при нажатии. Как сделать так, чтобы в переключении участвовало три изображения. Нужно что-то делать с переменной flag? добавлять условия?

С тремя гораздо сложнее. Тут лучше уже делать массив со всеми изображениями и кликами вытаскивать следующий элемент. Плюс надо хранить в глобальной переменной текущий активный элемент (лучше индекс в массиве).

Я пока попробовал без массива, такой код может быть? У меня работает, все три картинки при щелчке сменяются.

Можно, но если потребуется 10 картинок, то замучаетесь подобным образом делать.

У меня не сменяется изображение при нажатии на кнопку, где ошибка?

Пути надо указывать относительные и уж тем более без русских символов и пробелов.

Михаил, подскажите. У объекта есть свойство background-image. Я хочу, чтобы путь к файлу (url) можно было задавать с помощью переменой. Как это сделать? path = ‘image/im1.jpg’; document.getElementById(‘im1’).style.background-image = ‘url(path)’; Этот код не работает, потому что ищется картинка path.

Долго мучился с последним скриптом. Оказалось слишком тщательно списал и первый и второй скрипт, и пока не поменял в первом img name = ‘img’ на img name = ‘img1’ у второго скрипта замена не работала.

Исправьте, пожайлуста, в предпоследнем абзаце «. чтобы в следующий раз было друое изображение. » слово «другое»

Не работает в HTML5. Какой код должен быть для него?

Источник

Использование изображений

До сих пор мы создавали наши собственные фигуры и применяли стили к ним. Одна из самых впечатляющих функций это возможность использования изображений. Они могут быть использованы для динамического композитинга фото или как фоны графиков, для спрайтов в играх, и так далее. Внешние изображения могут быть использованы в любых поддерживаемых браузером форматах, таких как PNG, GIF, или JPEG. Вы можете даже использовать изображение, произведённое другими canvas элементами на той же странице как источник!

Импортирование изображений в canvas в основном состоит из 2 этапов:

Давайте посмотрим как это сделать.

Использование изображений для рисования

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

Есть несколько способов, чтобы получить изображения для использования на холсте.

Использование изображений из той же страницы

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

Использование изображений из других доменов

Использование других canvas элементов

Как и с обычными изображениями, мы можем получить доступ к другим canvas элементам используя либо document.getElementsByTagName() либо document.getElementById() метод. Проверьте, что в canvas источнике уже что-то нарисовано, прежде чем использовать его в целевом изображении canvas.

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

Создание изображений с нуля

Другой способ это создать новые HTMLImageElement объекты в нашем скрипте. Чтобы это сделать, вы можете использовать удобный Image() конструктор:

Когда этот скрипт выполнится, изображение начнёт загружаться.

Если вы попытаетесь вызвать функцию drawImage() перед тем как изображение загрузится, то скрипт ничего не сделает (или, в старых браузерах, может даже выдать исключение). Поэтому вам необходимо использовать событие load, чтобы вы не пытались сделать это прежде, чем изображение загрузится:

Если вы используете только одно стороннее изображение, то этот метод может быть хорошим примером, но если нужно следить за несколькими изображениями, то необходимо придумать что-то более умное. Хотя поиски тактики проверки загрузки изображений выходят за пределы этого обучающего курса, вы должны об этом помнить.

Вложение изображения с помощью данных: URL

Другой возможный способ включить изображение это через data: url. Data URLs позволяет вам полностью определить изображение как Base64 кодированную строку символов прямо в ваш код.

Одним из преимуществ data URLs это то что полученное изображение доступно сразу без других запросов туда-обратно на сервер. Другое потенциальное преимущество в том, что также можно инкапсулировать всё в одном файле все ваши CSS, JavaScript, HTML, и изображения, что делает его более портативным в других местах.

Некоторые недостатки этого метода в том что ваше изображение не кешировано, и для изображений с большим размером кодирование url может стать очень долгим процессом.

Использование кадров из видео

Вы также можете использовать кадры из видео представленных элементом (даже если видео не видно). Например, если у вас есть элемент с ID «myvideo», вы можете сделать:

Рисование изображений

Как только мы получили ссылку на источник объекта изображения, мы можем использовать метод drawImage() для включения его в canvas. Как мы увидим далее, метод drawImage() перегружен и у него есть несколько вариантов. В базовом варианте он выглядит как:

SVG изображения должны указывать ширину и высоту корневого элемента.

Пример: Простой линейный график

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

Получившийся график выглядит так:

Screenshot	Live sample

Изменение размеров

Второй вариант метода drawImage() добавляет два новых параметра и позволяет разместить изображение в canvas с изменёнными размерами.

drawImage(image, x, y, width, height) Это добавляет параметр ширины и высоты, которые указывают до какого размера нужно изменить изображение при рисовании его в canvas.

Пример: Тайлинг изображения

В этом примере, мы будем использовать изображение в качестве обоев и повторим его в canvas несколько раз. Это может быть сделано просто через цикл, располагая изменённые изображения на разных позициях. В коде внизу, первый цикл for проходит по рядам. Второй цикл for проходит по колонкам. Изображение уменьшено на треть от реального размера, которое было 50×38 пикселей.

Обратите внимание: Изображения могут стать размытыми, при большом увеличении или зернистыми при значительном уменьшении. Возможно, лучше всего не изменять размеры изображения, если на них есть текст, который должен остаться читаемым.

Получившийся рисунок canvas выглядит так:

Screenshot	Live sample

Нарезка

Чтобы понять что делает нарезка, можно посмотреть на изображение справа. Первые четыре параметра определяют местоположение и размер фрагмента исходного изображения. Последние четыре параметра определяют прямоугольник, в который будет вписано изображение на целевом рисунке canvas.

Нарезка может быть полезным инструментом, когда вы захотите сделать композицию. Вы могли бы собрать все элементы в одном файле изображения и использовать этот метод для создания композиции. Например, если вы захотите сделать график, вы могли бы сделать PNG изображение, содержащее все необходимые тексты в одном файле и в зависимости от ваших данных, могли бы достаточно просто изменять график. Другим преимуществом является то, что нет необходимости загружать каждое изображение по отдельности, получив возможность увеличить скорость загрузки.

Пример: Обрамление изображения

В этом примере, мы будем использовать того же носорога, что и в предыдущем примере, но мы отрежем его голову и включим её в рамку. Изображение рамки это 24-х битный PNG, который включает падающую тень. Так как в 24-х битные PNG изображения включается полный 8-ми битный альфа-канал, в отличие от GIF и 8-битных PNG изображений, он может быть помещён в любой фон, без беспокойства о матовом цвете.

Screenshot	Live sample

Пример галереи искусства

В последнем примере этой главы, мы построим небольшую галерею искусств. Галерея состоит из таблицы, включающей несколько изображений. Когда страница загрузится, элемент вставится в каждое изображение, а вокруг будет нарисована рамка.

В этом случае, у каждого изображения фиксированная ширина и высота, такая же, как и у рамки нарисованной вокруг них. Вы могли бы усовершенствовать этот скрипт так, чтобы он использовал ширину и высоту изображения, чтобы рамка идеально его окружила.

Код ниже должен говорить сам за себя. Мы проходим циклом через document.images контейнер и соответственно добавляем новые элементы canvas. Возможно следует упомянуть для тех, кто не слишком хорошо знаком с DOM, что для этого используется Node.insertBefore метод. insertBefore() это метод родительского узла (ячейки таблицы) элемента (изображения) перед которым мы хотим вставить наш новый узел (элемент canvas).

И сюда какую-нибудь CSS для украшения:

Связывая все вместе JavaScript рисует наши изображения в рамках:

Контроль изменений размеров изображения

Источник

Всё для веб-мастера • Сайт вебмастеров