БлогNot. Javascript: находим разницу между картинками в процентах

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

Javascript: находим разницу между картинками в процентах

Некогда я сравнивал цвета, находя "видимую" разницу между ними в процентах с учётом различной чувствительности человеческого глаза к красному, зеленому и синему. А почему бы не сравнить попиксельно картинки, вычисляя нормированную разность цветов пикселов? Это даёт, например, достаточно хорошую оценку визуального различия JPEG с высоким и низким качеством. Конечно, картинки должны быть одного размера в пикселах, иначе задача теряет смысл.

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

Так как в любом браузере легко просмотреть исходный код страницы (нажмите правой кнопкой мыши на свободном месте страницы и выберите команду "Исходный код страницы" или "Просмотр HTML-кода" и т.п., название пункта меню зависит от браузера), я не буду отдельно прикладывать исходник сервиса, а только дам ссылку на него в работе и приведу скриншот работы приложения. Исходник написан и предполагается к размещению в кодировке UTF-8 (Юникод).

 Сравнение картинок на Javascript, открыть сервис в новом окне/вкладке

левая картинка имела качество JPEG 50%, правая 100% (на скрине качество потеряно)
левая картинка имела качество JPEG 50%, правая 100% (на скрине качество потеряно)

Просто однотонно белое и однотонно чёрное полотна одинаковых линейных размеров имеют разницу цветов ровно 100%, проверено.

Чтобы программа могла реагировать на факт загрузки пользователем файла, я использовал JQuery с сервера Гугля, легко умеющий отслеживать событие change для элемента <input type="file">. Для оффлайн работы с приложением (при отключённом Интернете) достаточно скачать JQuery и поместить его файл под именем jquery.js в папку скрипта, изменив тег подключения JQuery на

<script src="jquery.js"></script>

На основе кода нетрудно написать и другие подобные решения, например, попиксельное наложение картинок.

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


теги: javascript графика цвет сервис

комментарии (0)

01.11.2017, 20:36; рейтинг: 61

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

Наверх Яндекс.Метрика
© PerS
вход