как просмотреть код картинки

Декодирование JPEG для чайников

[FF D8]

Вам когда-нибудь хотелось узнать как устроен jpg-файл? Сейчас разберемся! Прогревайте ваш любимый компилятор и hex-редактор, будем декодировать это:

Специально взял рисунок поменьше. Это знакомый, но сильно пережатый favicon Гугла:

Последующее описание упрощено, и приведенная информация не полная, но зато потом будет легко понять спецификацию.

Даже не зная, как происходит кодирование, мы уже можем кое-что извлечь из файла.

[FF D8] — маркер начала. Он всегда находится в начале всех jpg-файлов.

Следом идут байты [FF FE]. Это маркер, означающий начало секции с комментарием. Следующие 2 байта [00 04] — длина секции (включая эти 2 байта). Значит в следующих двух [3A 29] — сам комментарий. Это коды символов «:» и «)», т.е. обычного смайлика. Вы можете увидеть его в первой строке правой части hex-редактора.

Немного теории

Закодированные данные располагаются поочередно, небольшими частями:

Каждый блок Y_ij, Cb_ij, Cr_ij — это матрица коэффициентов ДКП (так же 8×8), закодированная кодами Хаффмана. В файле они располагаются в таком порядке: Y₀₀Y₁₀Y₀₁Y₁₁Cb₀₀Cr₀₀Y₂₀.

Чтение файла

Файл поделен на секторы, предваряемые маркерами. Маркеры имеют длину 2 байта, причем первый байт [FF]. Почти все секторы хранят свою длину в следующих 2 байта после маркера. Для удобства подсветим маркеры:

Маркер [FF DB]: DQT — таблица квантования

Оставшимися 64-мя байтами нужно заполнить таблицу 8×8.

Приглядитесь, в каком порядке заполнены значения таблицы. Этот порядок называется zigzag order:

Маркер [FF C0]: SOF0 — Baseline DCT

Этот маркер называется SOF0, и означает, что изображение закодировано базовым методом. Он очень распространен. Но в интернете не менее популярен знакомый вам progressive-метод, когда сначала загружается изображение с низким разрешением, а потом и нормальная картинка. Это позволяет понять что там изображено, не дожидаясь полной загрузки. Спецификация определяет еще несколько, как мне кажется, не очень распространенных методов.

Находим H_max=2 и V_max=2. Канал i будет прорежен в H_max/H_i раз по горизонтали и V_max/V_i раз по вертикали.

Маркер [FF C4]: DHT (таблица Хаффмана)

Эта секция хранит коды и значения, полученные кодированием Хаффмана.

Следующие 16 значений:

Количество кодов означает количество кодов такой длины. Обратите внимание, что секция хранит только длины кодов, а не сами коды. Мы должны найти коды сами. Итак, у нас есть один код длины 1 и один — длины 2. Итого 2 кода, больше кодов в этой таблице нет.
С каждым кодом сопоставлено значение, в файле они перечислены следом. Значения однобайтовые, поэтому читаем 2 байта:

Далее в файле можно видеть еще 3 маркера [FF C4], я пропущу разбор соответствующих секций, он аналогичен вышеприведенному.

Построение дерева кодов Хаффмана

Мы должны построить бинарное дерево по таблице, которую мы получили в секции DHT. А уже по этому дереву мы узнаем каждый код. Значения добавляем в том порядке, в каком указаны в таблице. Алгоритм прост: в каком бы узле мы ни находились, всегда пытаемся добавить значение в левую ветвь. А если она занята, то в правую. А если и там нет места, то возвращаемся на уровень выше, и пробуем оттуда. Остановиться нужно на уровне равном длине кода. Левым ветвям соответствует значение 0, правым — 1.

Деревья для всех таблиц этого примера:

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

Маркер [FF DA]: SOS (Start of Scan)

Байт [DA] в маркере означает — «ДА! Наконец-то то мы перешли к финальной секции!». Однако секция символично называется SOS.

[00], [3F], [00] — Start of spectral or predictor selection, End of spectral selection, Successive approximation bit position. Эти значения используются только для прогрессивного режима, что выходит за рамки статьи.

Отсюда и до конца (маркера [FF D9]) закодированные данные.

Закодированные данные

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

Нахождение DC-коэффициента

1) Читаем последовательность битов (если встретим 2 байта [FF 00], то это не маркер, а просто байт [FF]). После каждого бита сдвигаемся по дереву Хаффмана (с соответствующим идентификатором) по ветви 0 или 1, в зависимости от прочитанного бита. Останавливаемся, если оказались в конечном узле.

2) Берем значение узла. Если оно равно 0, то коэффициент равен 0, записываем в таблицу и переходим к чтению других коэффициентов. В нашем случае — 02. Это значение — длина коэффициента в битах. Т. е. читаем следующие 2 бита, это и будет коэффициент:

Нахождение AC-коэффициентов

1) Аналогичен п. 1, нахождения DC коэффициента. Продолжаем читать последовательность:

2) Берем значение узла. Если оно равно 0, это означает, что оставшиеся значения матрицы нужно заполнить нулями. Дальше закодирована уже следующая матрица. В нашем случае значение узла: 0x31.

Читать AC-коэффициенты нужно пока не наткнемся на нулевое значение кода, либо пока не заполнится матрица.
В нашем случае мы получим:

Вы заметили, что значения заполнены в том же зигзагообразном порядке? Причина использования такого порядка простая — так как чем больше значения v и u, тем меньшей значимостью обладает коэффициент Svu в дискретно-косинусном преобразовании. Поэтому, при высоких степенях сжатия малозначащие коэффициенты обнуляют, тем самым уменьшая размер файла.

Аналогично получаем еще 3 матрицы Y-канала…

Но! Закодированные DC-коэффициенты — это не сами DC-коэффициенты, а их разности между коэффициентами предыдущей таблицы (того же канала)! Нужно поправить матрицы:

Теперь порядок. Это правило действует до конца файла.

… и по матрице для Cb и Cr:

Вычисления

Квантование

Вы помните, что матрица проходит этап квантования? Элементы матрицы нужно почленно перемножить с элементами матрицы квантования. Осталось выбрать нужную. Сначала мы просканировали первый канал. Он использует матрицу квантования 0 (у нас она первая из двух). Итак, после перемножения получаем 4 матрицы Y-канала:

… и по матрице для Cb и Cr.

Обратное дискретно-косинусное преобразование

Формула не должна доставить сложностей. S_vu — наша полученная матрица коэффициентов. u — столбец, v — строка. C_x = 1/√2 для x = 0, а в остальных случаях = 1. s_yx — непосредственно значения каналов.

Приведу результат вычисления только первой матрицы канала Y (после обязательного округления):

Ко всем полученным значениям нужно прибавить по 128, а затем ограничить их диапазон от 0 до 255:

Например: 138 → 266 → 255, 92 → 220 → 220 и т. д.

YCbCr в RGB

4 матрицы Y, и по одной Cb и Cr, так как мы прореживали каналы и 4 пикселям Y соответствует по одному Cb и Cr. Поэтому вычислять так: YCbCrToRGB(Y[y,x], Cb[y/2, x/2], Cr[y/2, x/2]):

Вот полученные таблицы для каналов R, G, B для левого верхнего квадрата 8×8 нашего примера:

Конец

Вообще я не специалист по JPEG, поэтому вряд ли смогу ответить на все вопросы. Просто когда я писал свой декодер, мне часто приходилось сталкиваться с различными непонятными проблемами. И когда изображение выводилось некорректно, я не знал где допустил ошибку. Может неправильно проинтерпретировал биты, а может неправильно использовал ДКП. Очень не хватало пошагового примера, поэтому, надеюсь, эта статья поможет при написании декодера. Думаю, она покрывает описание базового метода, но все-равно нельзя обойтись только ей. Предлагаю вам ссылки, которые помогли мне:

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 в теге

Источник

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

Часто возникают ситуации, когда необходимо проанализировать содержимое веб-страницы: посмотреть description, узнать размер какого-то элемента или просто выяснить, какой используется шрифт. С помощью опции «Просмотреть код» можно узнать не только это, но и многое другое – практически всю подноготную сайта.

Для каких целей нужен навык чтения кода и как в несколько кликов посмотреть содержимое сайта? Об этом и многом другом поговорим в сегодняшней статье.

Зачем мне нужен исходный код сайта?

Думаете, если вы не программист или верстальщик, то код вам вряд ли понадобится? На самом деле, он может помочь в разных ситуациях. Код может быть полезен:

Еще несколько возможностей при просмотре кода страницы: выгрузка картинок с исходным размером, просмотр сайта в адаптивном режиме, возможность изменять содержимое веб-страницы. Последнее работает в локальном режиме – изменения будут применены только на текущем ПК до тех пор, пока страница не будет обновлена.

Как узнать код сайта

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

Как видите, здесь все логично и понятно.

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

Способ 1: Функция «Посмотреть код»

Открываем страницу, код которой нужно просмотреть, и кликаем по любой области правой кнопкой мыши. В отобразившемся меню выбираем «Посмотреть код». Также вы можете воспользоваться комбинацией клавиш «CTRL+SHIFT+I».

В результате мы попадаем в инспектор браузера – на экране появляется дополнительное окно, где сверху находится код страницы, а снизу – CSS-стили.

Обратите внимание на то, что запуск инструмента разработчика выполнялся в Google Chrome. В другом браузере название кнопки запуска может отличаться.

Способ 2: «Просмотр кода страницы»

Если в предыдущем случае мы могли открыть всю подноготную сайта, то сейчас нам будет доступен лишь HTML-код. Чтобы его посмотреть, находим на сайте пустое поле и кликаем по нему правой кнопкой мыши, затем выбираем «Просмотр кода страницы» (можно воспользоваться комбинацией клавиш «CTRL+U»). Если вы кликните правой кнопкой по элементу сайта, то кнопка «Просмотр кода страницы» будет отсутствовать.

После этого нас перенаправит на новую страницу со всем исходным кодом:

Здесь мы также можем посмотреть все содержимое страницы, однако узнать CSS и изменить данные у нас не получится.

Что такое HTML и CSS

Например, часто используется такая конструкция:

Это мой первый сайт!

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

CSS – это помощник HTML, который позволяет преображать страницу как угодно: можно настраивать цвета элементов, изменять их положение, размер и форму, добавлять адаптивность и многое другое. Подключение CSS выполняется непосредственно в HTML-файле с помощью специального тега.

Рассмотрим на небольшом примере, как работают стили:

Каждый сайт, который вы встречаете, использует связку HTML и CSS. Стоит упомянуть, что еще есть язык программирования JavaScript, который позволяет оживлять страницу. Например, он может активировать формы обратной связи, создать сложную анимацию, установить всплывающие окна и многое другое. Обычным пользователям разбираться в нем не нужно от слова совсем. Если вы собираетесь вести аналитику сайта или просто интересуетесь его содержимым, то в знаниях JavaScript нет никакой необходимости.

Как я могу использовать код

Выше мы рассмотрели лишь основные моменты, связанные с кодом сайта – научились просматривать его и узнали, что такое HTML и CSS. Теперь давайте применим полученные знания на практике – посмотрим, как всем этим пользоваться.

Вариант 1: Редактирование контента

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

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

В среде разработчика мы можем заменить текст, расположенный в данном теге. Чтобы это сделать, находим его в коде, кликаем по нему двойным щелчком мыши и заменяем на другой. Ниже пример: мы поменяли «Виртуальный хостинг» на «Классное решение».

Чтобы отменить внесенные изменения, достаточно воспользоваться клавишей «F5» – страница будет обновлена, а весь контент станет исходным.

Аналогичным образом мы можем поменять CSS-стили через нижнее окно, но для этого потребуются некоторые знания. Подробную информацию рекомендую посмотреть в CSS-справочнике.

Вариант 2: Скачивание картинок

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

Аналогичным образом мы можем выгрузить и фоновое изображение, но его стоит искать через CSS-стили в атрибуте background.

Вариант 3: Просмотр SEO-элементов

С помощью кода можно посмотреть основные SEO-теги. Сделать это можно следующим образом:

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

Как посмотреть исходный код на телефоне

Функционал мобильных браузеров сильно ограничен – посмотреть код сайт через инспектор мы не можем. Доступен только вариант с отображением всего HTML-кода страницы. Чтобы им воспользоваться, необходимо перед ссылкой прописать «view-source:». Например, для https://timeweb.com/ru это будет выглядеть так:

Если нужны расширенные возможности для устройства на Android, то можно поискать специальные приложения, например, VT View Source.

Заключение

Источник

Показ масштабируемых изображений

Традиционная работа HTML-страниц с картинками заключается в раскрывании картинок вместо этих страниц. Пришла пора прекращать это неудобство на отдельно взятом сайте. Ссылки — хорошо, но удобный просмотр — лучше.

Что такое удобный просмотр? Пример «лайтбоксов» разных показал, что лучше открыть псевдоокно просмотра внутри документа, не удаляя документ. Но при чтении статей этот подход не очень удобен. Мы не видим контекст документа. Получается, что видна или картинка, или документ. Лучше, если картинка не закрывает текст, как организовано, например, в скрипте Dollchan Extension Tools (подсказали здесь), где просмотр картинок занимает малую часть общей функциональности просмотра «имаджбордов» — примерно таких же текстово-картиночных потоков статей. Сделаем и мы контролы управления картинками, добавив кое-что своё.

Кратко: что получилось в итоге

Далее будут последовательно рассмотрены: идеи, правила поведения интерфейса, детали реализации, алгоритм, примеры. Рассмотрения кода не будет — он есть в реализации, написан на чистом JS и выполняет свою роль, больше ничего не требуется. Может быть использован как практически, в готовой реализации (берём и смотрим картинки на сайте), так и для установки на другой сайт (LGPL v3). А теперь — во всех подробностях.

Причины (поиска лучшей жизни)

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

1) Ссылка. На странице встречается ссылка, ведущая на статическую картинку с расширением jpg, jpeg, gif, png.
Пример: ссылка на картинку (случайно взятые виды курсорных схем).
Пример 2: ссылка на большую картинку: инфографика про Android (300 K) из статьи «Android в цифрах».
Решение: отображаем картинку (делая её загрузку) в уменьшенном размере рядом со ссылкой. По клику — просмотр.

Если переходим к просмотру картинки в полном размере, то картинка появляется в центре окна, занимая максимальное место по ширине или высоте. Колесом мыши её масштабируем, а перетаскиванием — перемещаем. Кликом по исходной картинке или по просматриваемой — закрываем просмотр. Кликом по другому превью — переходим на просмотр другой картинки.

2) Мини-превью. На странице имеется мини-картинка со ссылкой, раскрывающая (обычно) увеличенный оригинал.
Пример:

Решение: отображаем оригинал в скрытом блоке, чтобы узнать его размеры. По клику на ссылке — просмотр.

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

3) Ограничение по ширине. На странице в силу красивости дизайна картинки ужимаются до ширины колонки текста. Хочется посмотреть в полную ширину, но для этого надо расширять окно браузера.
Пример: широкая картинка (204 К)

Решение: картинку помечаем специальным курсором, например, «move» . Значит, по клику на ней перейдём к просмотру в максимальном размере.

4) что делать, если видим картинку, прекрасно помещающуюся в тексте?
Пример: небольшая картинка:

Решение: есть 2 варианта: или ничего не делать (настройка «смотреть увеличенные вдвое картинки» отключена), или показать в увеличенном в 2 раза виде и отмечать особым курсором (например, «ne-resize» — или ).
(Виды системных курсоров браузера в Windows, в других системах, как изменить курсор мыши.)

Случаи 3 и 4 не предполагают дополнительной загрузки картинок, а только улучшают просмотр. Поэтому их можно не отключать пользовательскими настройками сайта. Они перехватывают клики по ссылкам, поэтому, если ничего не предусмотреть, останется неудобный способ перехода по ссылке «Правая кнопка мыши — Просмотреть в новой вкладке». Поэтому в скрипте предусмотрим отключение функций просмотра, если удерживается клавиша Ctrl.

Более подробное правило 2

(2.a) Несколько картинок под ссылкой на картинку. Имеется ссылка на статическую картинку, определяемую по расширению файла, а внутри неё — различное, возможно, сложное HTML-содержание.
Решение:
*) если внутри ссылки нет тегов картинок, ставим уменьшенную копию скачанной картинки сверху (не более 200 на 200 пикс.).
*) Если есть только 1 картинка с тегами вокруг, и, возможно, с текстом, то считаем, что это — классическое превью в виде малой картинки со ссылкой на большую.
*) Если ссылка имеет более сложное внутреннее строение (больше 1 тега IMG), то строится отдельно превью для ссылки и отдельно — внутренности ссылки, просмотр её картинок. (Этот случай редкий, но его нужно учесть в алгоритме. Могут, например, сделать составное слово из картинок и навесить ссылку.)
Если попалась большая картинка — более 50% ширины окна, ставим курсор для индикации просмотра на 100%. Просматриваем с увеличением 200%, если ширина картинки — менее 50% ширины окна. По клику откроется рисунок по ссылке.

Пример: сложный случай: курсоры: снаружи — ссылка на таблицу с курсорами, а внутри малые картинки:
e-resize: , nw-resize: , crosshair:

Алгоритм

Из правил следует алгоритм. Сначала пробегаем область HTML (или DOM), ищем ссылки на картинки. Найдя, проверяем число тегов IMG внутри. Если 0 — просмотр ссылки по клику на отдельно сформированной картинке. Если один — устраиваем просмотр ссылки по клику на IMG, а к классу IMG добавляется класс-признак «не добавлять собственный просмотр» (_noAddOwnView). Если более одного тега IMG — просмотр ссылки отдельно, как в случае 0 тегов IMG, и каждый IMG просматривается также отдельно (но подготовлены они к просмотру будут во 2-м проходе).

Второй проход элементов ищет IMG. Все, не имеющие _noAddOwnView, оформляются для просмотра (перед ними появляется невидимый DIV с вложенной невидимой картинкой — дублем IMG, чтобы измерить её настоящие размеры). На все _noAddOwnView добавляется тот же просмотр, но картинка подменяется адресом родительской ссылки (ссылка может быть родителем не первого уровня, а старше). Все картинки для предпросмотра, созданные на 1-м проходе не затрагиваются (отсеиваются по классу _noAddOwnView).

Особые расширения возможностей

Служебные картинки и остальные внутри ссылок обрамлены ссылкой. Но клики по картинкам перехватываются по preventDefault(), то есть, ссылки не работают. Было бы интересно иметь обычное поведение ссылки, если хотим просмотреть картинку в новой вкладке, нажав перед кликом клавишу Ctrl (как обычно принято в Firefox и Chrome для открывания ссылки в новой вкладке). Поэтому, по нажатию Ctrl все действия просмотра отменяются, чтобы ссылка открылась в новой вкладке.

Чтобы получить ещё ряд возможностей, с удержанием кнопки Shift показываем контекстное меню для картинок. Оно будет содержать все желаемые операции, которые не поместились на клик мыши. Например, просмотр превью-картинки в увеличенном виде (то, что скрыли при наличии ссылки вокруг, хотя вряд ли нужно просматривать картинки превью), поиск через поисковики картинок (5 ссылок). При желании, в меню добавляются иные возможности.

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

Реализация

Все эти варианты просмотра возможны со скриптом HabrAjax версии 0.901 (от 21 января 2013) на страницах Хабра.

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

И это не всё. Если пользователь включил настройку «Принудительный кат«, картинки из аннотаций в ленте уменьшаются (было сделано довольно давно, месяцев 8 назад). Чтобы увидеть полные картинки, требовалось просмотреть статью. Теперь, по клику на картинке, также смотрим её в полном размере и с перемещением по окну. Все картинки принудительного ката тоже получили освобождение.

Надо снова предупредить: настройка «подгружать ссылки-картинки» увеличивает трафик. Включать её имеет смысл на безлимитных тарифных планах. Чтобы скрипт не был ответственным за неосознанный расход трафика, добавлено подтверждение пользователем этого предупреждения: ‘Включена настройка «Подгрузка рисунков», но не подтверждена. Согласны ли Вы с увеличением трафика за счёт подгрузки рисунков?‘. Нужно один раз согласиться, что будет запомнено в настройках.

* «Curiosity на дне» — фотографии Марса в большинстве своём имеют ширину 1100px — на узких окнах ужимаются стилями по ширине колонки. Клик — и все условности сняты. В комментариях есть большие фото, доступные также для просмотра в масштабе.

Процент масштаба показывается в текстовой подсказке, а при попадании в пределы 88-113% устанавливается в 100% (или 200%, в зависимости от вида просмотра).

* «Удивительный Марс» — несколько красивых больших и 2 очень больших (по ссылкам на них) картинки.

* «Когда каждый день как DDOS. Крупнейшие китайские сайты» — там между первой и второй картинками под цифрами «83%»появляется инфографика — большой JPG в 4000 пикселей высотой, в уменьшенном виде занимающий 200px. Без настройки «подгружать ссылки-картинки» — её нет, а по ссылке выполняется обычный просмотр.

* habrahabr.ru/feed/new или любая другая лента с настройкой «Принудительный кат«. Уменьшенные картинки просматриваются в размере 100%, а если они меньше 200 на 120 — то в размере 200%.

* «Javascript и canvas в игре «Жизнь» Джона Конвея» — большая первая картинка под превью на 1300 пикселей прекрасно просматривается внутри страницы, а остальные мелкие идут на просмотр в режиме «x2» (200% их размера).

*) И, к примеру, статья «Числа Каталана» с рядом картинок разного размера и степени прозрачности.

Если включена настройка «просмотр картинок» (в окне по центру), то все картинки на странице уже не замещают страницу, как это принято на сайте, и даже не просто открываются в новом окне, как это было сделано не очень давно (4 мес. назад) в HabrAjax, а открываются в виде максимальной по размеру картинки, вписанной в рамки окна и центрированной относительно него. Если она меньше размеров окна, картинка оказывается центрированной. При этом затенение не мешает читать страницу — затенения нет, в отличие от «лайтбокс»-подобных скриптов.

Пример 1: скриншот просмотра большого скриншота из статьи о просмотрщике Хабра на iOS. Курсор, наведённый на картинку-превью — это «ne-resize», а превью подсказывает размеры полной картинки.

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

Картинку можно передвинуть, чтобы прочитать страницу, а колесом мыши — изменить её масштаб. Кликом — закрыть. Кликом на исходной картинке — тоже.

Кроме имевшейся в Dollchan функциональности, расширяем удобства. При удержании Ctrl при клике на исходной картинке она открывается в новой вкладке. При Shift — открывается меню поиска по поисковикам картинок. Ещё одна группа удобств открывается для работы с принудительно уменьшенными картинками из «принудительного ката». Если она уменьшена, клик по ней показывает её исходный размер в формате просмотра картинки.

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

Пример 3: статья, в которой имеется много картинок в комментариях: «Светодиодная лента в качестве освещения комнаты». Даже та одна картинка, которая представлена в виде ссылке, выглядит как «засветившийся оранжевым» прямоугольник в ровной матрице ссылок. Остаются не предпросматриваемыми те картинки, которые не смогли загрузиться (в нижнем ряду чья-то картинка из dropbox).

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

Все коды этой функциональности, не считая используемых процедур, записаны в юзерскрипте HabrAjax под именами функций addFullImg, handlImgViews на чистом JS и занимают примерно 200 строк.

Их можно использовать для построения собственного просмотрщика картинок (LGPL v3). Но специально такой задачи (сделать плагин для подключения просмотра картинок) также не стояло, поэтому отдельно выложенного кода на Гитхабе (пока) нет. Впрочем, копированием функций просмотра картинок и настройкой тегов под собственный сайт, это выполнимо, аналогично работе по копированию из Dollchan. Особенность — данные скрипты не поддерживают IE8 и ниже. Для поддержки нужно сделать кроссбраузерные дополнения, например, использовать для селекторов функцию jQuery $().

Источник