Как вставить картинку в javascript
Объект 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 рисует наши изображения в рамках:
Контроль изменений размеров изображения
Вставка изображения из буфера с помощью javascript
Все те, кто постоянно пользуется компьютером, ежедневно используют системный буфер обмена. В основном, конечно, для копирования и вставки текста. Но не стоит забывать и о возможности сохранения изображений в буфере. Я хочу рассказать, как при помощи javascript можно получить изображение из буфера к себе на сайт или приложение. В настоящее время это работает только в Chrome и Firefox.
В Chrome мы получаем доступ к изображению с помощью clipboardData (это возможно только в обработчике события paste). Внутри обработчика проходим по всему содержимому буфера и получаем изображение. Затем создаем его blob образ и используем его урл для изображения, добавляемого на страницу.
Firefox не иммеет объекта clipboardData и для вставки изображения используем то, что в нем можно вставлять изображение в элемент с атрибутом contenteditable. Хак SetTimeout (checkInput, 1) используется для того, чтобы получить изображение после его вставки.
Здесь можно посмотреть, как работает данный скрипт.
О песочнице
Это «Песочница» — раздел, в который попадают дебютные посты пользователей, желающих стать полноправными участниками сообщества.
Если у вас есть приглашение, отправьте его автору понравившейся публикации — тогда её смогут прочитать и обсудить все остальные пользователи Хабра.
Чтобы исключить предвзятость при оценке, все публикации анонимны, псевдонимы показываются случайным образом.
О модерации
Не надо пропускать:
Форум
Справочник
имеется скрипт теста для сотрудников, не получается вставитькартинку, Что не так делаю?:
Скрипт работает без:
Т.е. ко второму вопросу идет фотовопрос. Подскажите, как сделать что бы работало?
Эту часть объявить под массивом с вопросами и все будет ок.
Эту часть объявить под массивом с вопросами и все будет ок.
Скрипт работает, но изображение не появляется. И мне хотелось бы его вставить в сам массив, а не под ним.
Не могли бы вы написать пример кода использования метода appendChild в моём случае? Пока только знакомлюсь с javascript и много не знаю.
Простите, правильно ли я понял?
не работает! Уже думаю, хотя бы ссылку вставить
Нет, не правильно. Вы не показали HTML и место, куда хотите вставить картинку. Вместо «id» нужно использовать id реально существующего элемента. Это во-первых. Ну а во-вторых, вынесите 16-ю строчку куда-нибудь в другое место, она там только мешает.
а не проще использовать innerHTML. 
для своего сайта реализовал превью меняемое при выборе аватарки 
На холсте можно в совершенстве нарисовать любую желаемую графику, от набора линий или простых геометрических фигур до портрета со всеми мельчайшими подробностями. Но с повышением уровня сложности графики повышается уровень сложности кода. В высшей степени маловероятно, что можно было бы написать самостоятельно весь код, требуемый для создания высококачественного изображения.
К счастью, у разработчиков есть другие варианты, кроме как писать весь код самостоятельно. Возможности контекста рисования не ограничиваются рисованием простых прямых и кривых линий, также существуют методы для вставки готовых изображений, текста, узоров и даже рамок для показа видео.
Вставка в Canvas изображений
Вам, наверное, приходилось видеть веб-страницы со спутниковыми картами того или иного региона планеты. Эти карты создаются из снимков отдельных участков поверхности земли, которые эти страницы загружают со спутника и объединяют в одно изображение. Это пример того, как можно взять несколько изображений и объединить их в одно требуемым образом.
Холст поддерживает работу с обычными изображениями посредством метода текста рисования drawImage(). Чтобы вставить изображение в холст, методу drawImage() в параметрах передается объект изображения и координаты холста, по которым это изображение следует вставить:
Но чтобы передать объект изображения, его сначала нужно получить. В HTML5 есть три разных способа получения объекта изображения. Первый подход — создать его самостоятельно попиксельно с помощью метода createImageData(). Но этот подход очень трудоемкий и медленный.
тогда изображение можно вставить в холст с помощью этого кода:
Наконец, можно создать объект изображения и загрузить изображение из отдельного файла. Недостаток этого подхода состоит в том, что изображение нельзя использовать с методом drawImage() до тех пор, пока оно полностью не загрузится. Во избежание проблем нужно подождать, пока не выполнится событие загрузки изображения onLoad, прежде чем пытаться выполнять какие-либо операции с ним.
Чтобы разобраться в этом процессе, рассмотрим пример. Допустим, нам нужно отобразить на холсте изображение face.jpg. Теоретически, это можно сделать такой последовательностью операций:
Здесь проблема состоит в том, что установка атрибута src начинает загрузку изображения, но код продолжает исполняться дальше, не ожидая завершения загрузки. Правильно будет использовать следующий код:
Этот подход может показаться нелогичным, т.к. порядок указания операций в коде не совпадает с порядком их исполнения. В данном примере вызов метода context.drawImage() происходит в последнюю очередь, вскоре после установки свойства img.src.
Изображения имеют широкий диапазон применений. Их можно использовать, чтобы приукрасить штриховые рисунки или как альтернативу рисованию изображений самому. Изображения можно использовать для разных объектов и персонажей, разместив их соответствующим образом на холсте. Изображения можно также применять для заполнения линий, чтобы придать им текстурированный вид.
Искажение рисунков в элементе Canvas
Если обнаружится, что ваше изображение по непонятной причине растянуто, сжато или искажено каким-либо другим образом, наиболее вероятной причиной этому будет установка размера холста посредством правила таблицы стилей. Правильно устанавливать размер холста надо через указание его высоты и ширины в атрибутах height и width элемента в разметке страницы. Может показаться, что эти значения не обязательно задавать в разметке, используя такую форму тега:
а установить их в правиле таблицы стилей следующим образом:
Обрезка, разрезка и изменение размеров изображения
Функция drawImage() принимает несколько необязательных параметров, которые позволяют манипулировать изображением на холсте. Например, размер изображения можно изменить, указав параметры width и height следующим образом:
В данном случае метод размещает изображение в рамке размером 80×150 пикселов, левый верхний угол которой находится в точке холста с координатами (10,10). Если первоначальный размер изображения был 160×300 пикселов, то эта операция уменьшает его размеры наполовину в обоих направлениях, в результате чего общий размер конечного изображения будет лишь в четверть размера исходного.
Если нужно вставить в холст только часть изображения, методу drawImage() необходимо передать четыре параметра в начале списка параметра. Эти параметры определяют позицию и размер части изображения, которую нужно вырезать:
Возможностей метода drawImage() недостаточно, если вставляемое в холст изображение нужно повернуть или скосить на определенный угол. Но эти и другие манипуляции с изображением на холсте можно выполнить с помощью трансформаций.
Видеокадр
При исполнении этого кода выполняется захват одного кадра видео, воспроизводимого в момент выполнения кода, который потом вставляется в холст.
Эта возможность открывает дверь для создания некоторых интересных эффектов. Например, с помощью таймера можно последовательно выполнять захват кадров воспроизводимого видео и вставлять их в холст. Если делать это достаточно быстро, то вставляемая в холст последовательность кадров будет создавать эффект проигрывающегося видео.
Но чтобы это не был просто другой видеопроигрыватель, захваченные кадры можно модифицировать перед тем, как вставлять их в холст. Например, вставляемый кадр можно увеличить или уменьшить или наложить какой-либо эффект в стиле Photoshop, модифицировав его на уровне пикселов. Один из примеров такой манипуляции смотрите на странице «video + canvas = magic». В нем показано, как сделать цветное видео черно-белым, преобразуя каждый цветной пиксел захваченного кадра в оттенок серого.
Вставка в холст текста
Другим типом данных, который нам вряд ли бы хотелось составлять из отдельных прямых и кривых, является текст. К счастью, разработчики HTML5 позаботились и об этом для нас и предоставляют два метода контекста рисования для работы с текстом.
Но прежде чем вставлять в холст какой-либо текст, нужно указать шрифт для него, установив значение свойства контекста font. Это значение указывается посредством строки с таким же синтаксисом, как и для универсального свойства font CSS. Как минимум, нужно указать размер шрифта в пикселах и его название. В случае неуверенности в поддержке определенного шрифта браузерами, можно указать список шрифтов:
Также можно установить жирный шрифт или курсив, указав соответствующие параметры в начале строки:
Самое главное, благодаря CSS3 можно использовать вычурные встроенные шрифты. Для этого нужно лишь сначала зарегистрировать название шрифта в таблице стилей. После установки шрифта текст в холсте вводится с помощью метода fillText(). Например, следующий код вводит в холст строку текста, левый верхний угол которого находится в точке (10,10):
Текст можно вставлять в любое место на холсте, но только по одной строке за раз. Чтобы вставить несколько строк, нужно делать соответствующее число вызовов метода fillText().
Как уже отмечалось, метод strokeText() вводит только очертания букв. Если требуется создать текст одного цвета, а его обводку — другого, можно использовать сначала метод fillText(), а после него метод strokeText().
Операция вывода текста на холст выполняется намного медленнее, чем рисование линий и даже изображений. Скорость не имеет важности при создании статического изображения (например, диаграммы), но может быть фактором при создании интерактивного приложения или анимации. Оптимизировать ввод текста можно, сначала сохранив требуемый текст в файле изображения, а потом отображая его на холсте посредством метода drawImage().