Блог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 графика сервис цвет

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

Ваше имя:
Пароль (если желаете зарегистрировать имя):
Любимый URL (если указываете, то вставьте полностью):
Текст сообщения (до 1024 символов):
 
Введите 1-й код из этих чисел:
87878, 90241, 77078, 56488
 

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

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

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