Как вставить изображение в код javascript

var img = document.getElementsByTagName('img'); var block = document.getElementsByClassName('block'); var index = null; for (let i = 0; i < block.length; i++) < block[i].addEventListener('click', function() < document.querySelector('#modal').classList.add('modal'); index = i; >) > for (let i = 0; i < img.length; i++) < img[i].addEventListener('click', function() < block[index].style.backgroundImage = 'url(' + img[i].src + ')'; document.querySelector('#modal').classList.remove('modal'); index = null; >) >

* < margin: 0; padding: 0; box-sizing: border-box; >html, body < height: 100%; width: 100%; background: #454544; >#wrapper < width: 100%; height: 100%; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; >#modal < overflow: hidden; position: fixed; opacity: 0; top: 50%; left: 50%; width: 1px; height: 1px; background: rgba(20, 20, 20, 0.9); transform: translate(-50%, -50%); display: flex; justify-content: center; flex-wrap: wrap; align-items: center; transition: all .1s; >#modal.modal < overflow: hidden; position: fixed; opacity: 1; top: 50%; left: 50%; width: 100%; height: 100%; background: rgba(20, 20, 20, 0.7); transform: translate(-50%, -50%); display: flex; justify-content: center; flex-wrap: wrap; align-items: center; transition: opacity 0.1s, width 0.3s, heigth 0.3s 0.3s, background 0.1s; >img < width: 330px; height: 200px; margin-left: 5px; border-radius: 5px; border: 1px solid black; >.block < float: left; width: 330px; height: 200px; margin-top: 50px; margin-left: 20px; border: 1px solid gray; transition: background 0.5s 0.1s; border-radius: 5px; background-image: url(https://avatars.mds.yandex.net/get-pdb/1016500/02e248bb-ced8-489a-ad98-30a6259ce7fe/s1200); background-size: cover; >

 id="image-container">

Теперь напишем js код:

// Создаем элемент изображения const img = document.createElement('img'); // Устанавливаем путь к изображению img.src = 'path/to/image.jpg'; // Устанавливаем альтернативный текст для изображения img.alt = 'Описание изображения'; // Получаем контейнер, куда нужно вставить изображение const container = document.querySelector('#image-container'); // Вставляем изображение в контейнер container.append(img); 

Этот код создаст элемент , устанавливает ему путь и альтернативный текст, а затем добавляет его в контейнер, который имеет идентификатор image-container .

HTML5 Canvas — вставка изображений и текста

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

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

Вставка в Canvas изображений

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

Холст поддерживает работу с обычными изображениями посредством метода текста рисования drawImage(). Чтобы вставить изображение в холст, методу drawImage() в параметрах передается объект изображения и координаты холста, по которым это изображение следует вставить:

// Определение контекста рисования canvas = document.getElementById("drawingCanvas"); context = canvas.getContext("2d"); context.drawImage(img, 10, 10);

Но чтобы передать объект изображения, его сначала нужно получить. В HTML5 есть три разных способа получения объекта изображения. Первый подход — создать его самостоятельно попиксельно с помощью метода createImageData(). Но этот подход очень трудоемкий и медленный.

Второй подход — использовать уже имеющийся в разметке элемент . Например, если у нас есть следующая разметка:

тогда изображение можно вставить в холст с помощью этого кода:

var img = document.getElementById("photo"); context.drawImage(img, 10, 10);

Наконец, можно создать объект изображения и загрузить изображение из отдельного файла. Недостаток этого подхода состоит в том, что изображение нельзя использовать с методом drawImage() до тех пор, пока оно полностью не загрузится. Во избежание проблем нужно подождать, пока не выполнится событие загрузки изображения onLoad, прежде чем пытаться выполнять какие-либо операции с ним.

Чтобы разобраться в этом процессе, рассмотрим пример. Допустим, нам нужно отобразить на холсте изображение face.jpg. Теоретически, это можно сделать такой последовательностью операций:

// Создаем объект изображения var img = new Image(); // Загружаем файл изображения img.src = "face.jpg"; // Прорисовываем изображение. (Этот шаг может не выполниться, // т.к. изображение, может быть, еще не загрузилось.) context.drawImage(img, 10, 10);

Здесь проблема состоит в том, что установка атрибута src начинает загрузку изображения, но код продолжает исполняться дальше, не ожидая завершения загрузки. Правильно будет использовать следующий код:

// Создаем объект изображения var img = new Image(); // Привязываем функцию к событию onload // Это указывает браузеру, что делать, когда изображение загружено img.onload = function() < context.drawImage(img, 10, 10); >; // Загружаем файл изображения img.src = "face.jpg";

Этот подход может показаться нелогичным, т.к. порядок указания операций в коде не совпадает с порядком их исполнения. В данном примере вызов метода context.drawImage() происходит в последнюю очередь, вскоре после установки свойства img.src.

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

Искажение рисунков в элементе Canvas

Если обнаружится, что ваше изображение по непонятной причине растянуто, сжато или искажено каким-либо другим образом, наиболее вероятной причиной этому будет установка размера холста посредством правила таблицы стилей. Правильно устанавливать размер холста надо через указание его высоты и ширины в атрибутах height и width элемента в разметке страницы. Может показаться, что эти значения не обязательно задавать в разметке, используя такую форму тега:

а установить их в правиле таблицы стилей следующим образом:

canvas

Но этот подход не будет работать. Проблема состоит в том, что свойства height и width CSS отличаются от одноименных свойств элемента . Если не указать размеры холста в разметке, будет установлен размер холста по умолчанию 300×150 пикселов. Потом таблица стилей будет растягивать или сжимать холст, чтобы подогнать его к указанным в ней размерам, изменяя соответствующим образом размеры всего содержимого холста. В результате размещенные на холсте изображения будут искажены, что, несомненно, не сделает их привлекательными.

Во избежание этой проблемы всегда нужно указывать размер холста в разметке посредством атрибутов height и width элемента . А если нужно изменить размер холста на основе каких-либо других критериев, значения этих атрибутов изменяются в разметке с помощью JavaScript.

Обрезка, разрезка и изменение размеров изображения

Функция drawImage() принимает несколько необязательных параметров, которые позволяют манипулировать изображением на холсте. Например, размер изображения можно изменить, указав параметры width и height следующим образом:

// JS context.drawImage(img, 10, 10, 80, 150);

В данном случае метод размещает изображение в рамке размером 80×150 пикселов, левый верхний угол которой находится в точке холста с координатами (10,10). Если первоначальный размер изображения был 160×300 пикселов, то эта операция уменьшает его размеры наполовину в обоих направлениях, в результате чего общий размер конечного изображения будет лишь в четверть размера исходного.

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

context.drawImage(img, source_x, source_y, source_width, source_height, x, y, width, height);

Последние четыре параметра в этом коде те же, что и в предыдущем примере — они определяют позицию и размер изображения на холсте. Допустим, что мы хотим вставить в холст только верхнюю половину изображения с исходным размером 225×300 пикселов. Для этого с левого верхнего угла изображения (точка (0,0)) отрезаем часть изображения шириной в 225 и высотой в 150 пикселов, которую потом вставляем в холст в начальной точке с координатами (50,25). Все это делается в одной строчке кода:

context.drawImage(img, 0, 0, 225, 150, 50, 25, 225, 150);

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

Видеокадр

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

Но это не все, что можно вставить в холст посредством этого метода. Вместо изображения можно указать элемент (но не тот, на котором выполняется настоящее рисование). Таким же образом можно вставить и элемент , в котором воспроизводится видео:

var video = document.getElementById("videoPlayer"); context.drawImage(video, 0, 0, video.clientWidth, video.clientWidth);

При исполнении этого кода выполняется захват одного кадра видео, воспроизводимого в момент выполнения кода, который потом вставляется в холст.

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

Но чтобы это не был просто другой видеопроигрыватель, захваченные кадры можно модифицировать перед тем, как вставлять их в холст. Например, вставляемый кадр можно увеличить или уменьшить или наложить какой-либо эффект в стиле Photoshop, модифицировав его на уровне пикселов. Один из примеров такой манипуляции смотрите на странице «video + canvas = magic». В нем показано, как сделать цветное видео черно-белым, преобразуя каждый цветной пиксел захваченного кадра в оттенок серого.

Вставка в холст текста

Другим типом данных, который нам вряд ли бы хотелось составлять из отдельных прямых и кривых, является текст. К счастью, разработчики HTML5 позаботились и об этом для нас и предоставляют два метода контекста рисования для работы с текстом.

Но прежде чем вставлять в холст какой-либо текст, нужно указать шрифт для него, установив значение свойства контекста font. Это значение указывается посредством строки с таким же синтаксисом, как и для универсального свойства font CSS. Как минимум, нужно указать размер шрифта в пикселах и его название. В случае неуверенности в поддержке определенного шрифта браузерами, можно указать список шрифтов:

// JS context.font = "20px Verdana, sans-serif";

Также можно установить жирный шрифт или курсив, указав соответствующие параметры в начале строки:

// JS context.font = "bold 20px Verdana, sans-serif";

Самое главное, благодаря CSS3 можно использовать вычурные встроенные шрифты. Для этого нужно лишь сначала зарегистрировать название шрифта в таблице стилей. После установки шрифта текст в холсте вводится с помощью метода fillText(). Например, следующий код вводит в холст строку текста, левый верхний угол которого находится в точке (10,10):

// JS context.textBaseline = "top"; context.font = "bold 20px Arial"; context.fillStyle = "black"; context.fillText("Кто рано встает, тот точно не я.", 10, 10);

Текст можно вставлять в любое место на холсте, но только по одной строке за раз. Чтобы вставить несколько строк, нужно делать соответствующее число вызовов метода fillText().

Вместо метода fillText() можно использовать другой метод для ввода текста — strokeText(). Этот метод вводит контуры букв текста; цвет и толщина контуров определяются значениями свойств контекста strokeStyle и lineWidth. Далее показано использование этого метода:

// JS context.font = "bold 40px Verdana,sans-serif"; context.lineWidth = 1; context.strokeStyle = "red"; context.strokeText("Народная мудрость", 20, 50);

Как уже отмечалось, метод strokeText() вводит только очертания букв. Если требуется создать текст одного цвета, а его обводку — другого, можно использовать сначала метод fillText(), а после него метод strokeText().

Операция вывода текста на холст выполняется намного медленнее, чем рисование линий и даже изображений. Скорость не имеет важности при создании статического изображения (например, диаграммы), но может быть фактором при создании интерактивного приложения или анимации. Оптимизировать ввод текста можно, сначала сохранив требуемый текст в файле изображения, а потом отображая его на холсте посредством метода drawImage().

Картинка, которая одновременно является кодом на Javascript

Изображения обычно хранятся как двоичные файлы, а файл Javascript по сути является обычным текстом. Оба типа файлов должны следовать собственным правилам: изображения имеют конкретный формат файла, определённым образом кодирующий данные. Для того, чтобы файлы Javascript можно было исполнять, они должны следовать определённому синтаксису. Я задался вопросом: можно ли создать файл изображения, одновременно являющийся допустимым синтаксисом Javascript, чтобы его можно было исполнять?

Прежде чем вы продолжите чтение, крайне рекомендую изучить эту песочницу кода с результатами моих экспериментов:

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

Выбор подходящего типа изображения

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

/*ALL OF THE BINARY IMAGE DATA*/

Это будет допустимый файл Javascript. Однако файлы изображений должны начинаться с определённой последовательности байтов, заголовка файла, специфичного для формата изображения. Например, файлы PNG всегда должны начинаться с последовательности байтов 89 50 4E 47 0D 0A 1A 0A. Если изображение будет начинаться с /* , то файл перестанет быть файлом изображения.

Этот заголовок файла привёл меня к следующей идее: что если использовать эту последовательность байтов как имя переменной и присвоить ей значение длинной строки:

PNG=`ALL OF THE BINARY IMAGE DATA`;

Мы используем шаблонные строки вместо обычных строк » или ‘ , потому что двоичные данные могут содержать разрывы строк, а шаблонные строки с ними справляются лучше.

К сожалению, большинство последовательностей байтов в заголовках файлов изображений содержат непечатаемые символы, которые нельзя использовать в именах переменных. Но есть один формат, который мы можем использовать: GIF. Блок заголовка GIF имеет вид 47 49 46 38 39 61, что удобно преобразуется в ASCII в строку GIF89a — абсолютно допустимое имя переменной!

Выбор подходящих размеров изображения

Теперь, когда мы нашли формат изображения, начинающийся с допустимого имени переменной, нам нужно добавить символы знака равенства и обратного апострофа (backtick). Следовательно следующими четырьмя байтами файла будут: 3D 09 60 04

Первые байты изображения

В формате GIF четыре байта после заголовка определяют размеры изображения. Нам нужно уместить в них 3D (знак равенства) и 60 (обратный апостроф, открывающий строку). В GIF используется порядок little endian, поэтому второй и четвёртый символы имеют огромное влияние на размеры изображения. Они должны быть как можно меньше, чтобы изображение не получилось шириной и высотой в десятки тысяч пикселей. Следовательно, нам нужно хранить большие байты 3D и 60 в наименее значимых байтах.

Второй байт ширины изображения должен быть допустимым пробельным символом (whitespace), потому что он будет пробелом между знаком равенства и началом строки GIF89a= `. . Стоит также помнить, что шестнадцатеричный код символов должен быть как можно меньше, иначе изображение окажется огромным.

Наименьший пробельный символ — это 09 (символ горизонтальной табуляции). Он даёт нам ширину изображения 3D 09, что в little endian равно 2365; немного шире, чем бы мне хотелось, но всё равно вполне приемлемо.

Для второго байта высоты можно выбрать значение, дающее хорошее соотношение сторон. Я выбрал 04, что даёт нам высоту 60 04, или 1120 пикселей.

Засовываем в файл скрипт

Пока наш исполняемый GIF почти ничего не делает. Он просто присваивает глобальной переменной GIF89a длинную строку. Мы хотим, чтобы происходило что-нибудь интересное! Основная часть данных внутри GIF используется для кодирования изображения, поэтому если мы попробуем вставить туда Javascript, то изображение, вероятно, будет сильно искажённым. Но по какой-то причине формат GIF содержит нечто под названием Comment Extension. Это место для хранения метаданных, которые не интерпретируются декодером GIF — идеальное место для нашей Javascript-логики.

Это расширение для комментариев находится сразу после таблицы цветов GIF. Поскольку мы можем поместить туда любое содержимое, можно запросто закрыть строку GIF89a, добавить весь Javascript, а затем начать многострочный блок комментария, чтобы остальная часть изображения не влияла на парсер Javascript.

В конечном итоге наш файл может выглядеть следующим образом:

GIF89a= ` BINARY COLOR TABLE DATA . COMMENT BLOCK: `;alert("Javascript!");/* REST OF THE IMAGE */

Однако существует небольшое ограничение: хотя сам блок комментария может иметь любой размер, он состоит из нескольких подблоков, и максимальный размер каждого из них составляет 255. Между подблоками есть один байт, определяющий длину следующего подблока. Поэтому чтобы уместить туда большой скрипт, его нужно разделить на мелкие фрагменты, примерно вот так:

alert('Javascript');/*0x4A*/console.log('another subblock');/*0x1F*/. 

Шестнадцатеричные коды в комментариях — это байты, определяющие размер следующего подблока. Они не относятся к Javascript, но обязательны для формата файла GIF. Чтобы они не мешали остальной части кода, их нужно поместить в комментарии. Я написал небольшой скрипт, обрабатывающий фрагменты скрипта и добавляющий их в файл изображения:

Подчищаем двоичные данные

Теперь, когда у нас есть базовая структура, нам нужно сделать так, чтобы двоичные данные изображения не испортили синтаксис кода. Как говорилось в предыдущем разделе, файл состоит из трёх разделов: в первом выполняется присваивание значения переменной GIF89a, второй — это код на Javascript, а третий — комментарий из нескольких строк.

Давайте взглянем на первую часть с присвоением значения переменной:

GIF89a= ` BINARY DATA `;

Если двоичные данные будут содержать символ ` или сочетание символов $< , то у нас возникнет проблема, ведь они или завершат шаблонную строку, или создадут недопустимое выражение. Исправить это довольно просто: достаточно изменить двоичные данные! Например, вместо символа ` (шестнадцатеричный код 60) можно использовать символ a (шестнадцатеричный код 61). Так как эта часть файла содержит палитру цветов, то это приведёт к незначительному изменению некоторых цветов, например, к использованию цвета #286148 вместо #286048 . Маловероятно, что кто-нибудь заметит разницу.

Боремся с искажениями

В конце Javascript-кода мы открыли многострочный комментарий, чтобы двоичные данные изображения не влияли на парсинг Javascript:

alert("Script done");/*BINARY IMAGE DATA . 

Если данные изображения будут содержать последовательность символов */ , то комментарий закончится преждевременно, из-за чего файл Javascript окажется недопустимым. Здесь мы снова можем вручную изменять один из двух символов, чтобы они не завершали комментарий. Однако поскольку теперь мы находимся в разделе закодированного изображения, то в результате получим повреждённое изображение, например такое:

Повреждённое изображение

В самых неблагоприятных случаях изображение может вообще не отображаться. Аккуратно выбирая бит, который нужно инвертировать, мне удалось минимизировать искажения. К счастью, было всего несколько случаев повреждающих сочетаний */ . На готовом изображении всё равно заметны небольшие искажения, например, в нижней части строки «Valid Javascript File», но в целом я вполне доволен результатом.

Завершаем файл

Нам осталась последняя операция — завершение файла. Файл должен завершаться байтами 00 3B, поэтому нам нужно завершить комментарий раньше. Поскольку это конец файла и любые потенциальные повреждения будут не особо заметны, я просто завершил комментарий из блоков и добавил однострочный комментарий, чтобы конец файла не вызывал проблем при парсинге:

/* BINARY DATA*/// 00 3B

Уговариваем браузер исполнить изображение

Теперь, после всего этого, у нас, наконец, есть файл, являющийся одновременно и изображением, и правильным файлом Javascript. Однако нам нужно преодолеть последнее препятствие: если мы загрузим изображение на сервер и попытаемся использовать его в теге script , то, скорее всего, получим подобную ошибку:

Refused to execute script from ‘http://localhost:8080/image.gif’ because its MIME type (‘image/gif’) is not executable. [Отказ от исполнения скрипта из ‘http://localhost:8080/image.gif’, потому что его MIME-тип не является исполняемым.]

То есть браузер справедливо говорит: «Это изображение, я не буду его исполнять!». И в большинстве случаев это вполне уместно. Но мы всё равно хотим его исполнить. Решение заключается в том, чтобы просто не говорить браузеру, что это изображение. Для этого я написал небольшой сервер, передающий изображение без информации заголовка.

Без информации о MIME-типе из заголовка браузер не знает, что это изображение и делает именно то, что лучше всего подходит в контексте: отображает его как изображение в теге или исполняет как Javascript в теге .

Но… зачем это всё?

Этого я пока и сам не понял. Такая задача — хорошая разминка для ума, но если вы сможете придумать ситуацию, в которой она действительно может быть полезной, то сообщите!

На правах рекламы

Серверы для разработчиков — это именно про виртуальные серверы от нашей компании.
Уже давно используем исключительно быстрые серверные накопители от Intel и не экономим на железе — только брендовое оборудование и самые современные решения на рынке для предоставления услуг.