Как определить качество загрузки изображения в JS - PullRequest
0 голосов
/ 04 мая 2018

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

Как мне этого добиться?

  1. Есть ли библиотека для этого?
  2. Есть ли решение для этого в HTML 5 canvas или в Konvajs (библиотека HTML canvas)
  3. Существует ли какой-либо загрузчик изображений, который поддерживает определение разрешения загружаемого изображения?

1 Ответ

0 голосов
/ 04 мая 2018

Большинство современных загрузчиков файлов предоставляют вам доступ к размерам изображения, или вы можете использовать средство чтения файлов, чтобы загрузить изображение в скрытый объект изображения dom и получить размеры таким образом. Пример в этот ТАК вопрос .

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

Чтобы решить, будет ли изображение приемлемым, нам нужно начать с цели. Нам нужно знать конечный выходной DPI и измеренные размеры. Я буду смотреть только на ширину, но те же вычисления работают и для высоты. Например, DPI для экрана ПК - 96, для приличного струйного принтера - до 4800 на 1200. Коммерческая печать варьируется от 300 до 2400.

Далее нам нужно знать размер целевой области - другими словами, измерение. Я буду использовать дюймы здесь, чтобы все было просто.

Расчет, который нам нужно сделать:

Image size dots / (target size inches * DPI)

Это производит масштабирование изображения, необходимое для размещения изображения в целевом пространстве. Если размер точки изображения в два раза больше размера цели, то масштаб равен 0,5, если размер точки изображения в 3 раза превышает цель, то масштаб равен 3.

Далее нам нужно узнать приемлемый диапазон масштабирования для изображения. Это произвольно и зависит от обстоятельств.

Давайте рассмотрим пример - создание визитной карточки размером 3,5 дюйма на 2 дюйма, в которую мы хотим поместить загруженную картинку на оборотную сторону. Мы печатаем с разрешением 300 DPI. Пользователь загружает изображение шириной 800 пикселей. Я буду игнорировать соотношение сторон для простоты.

Расчет, который нам нужно выполнить, -

  1. Идеальный размер точки изображения: 3,5 дюйма x 300 точек на дюйм = 1050 точек.
  2. Масштабирование изображения до цели = 800/1050 = 0,76
  3. Допустим, допустимый диапазон шкалы 0,8x - 4x.
  4. Вывод: изображение не подходит, поскольку масштаб из шага 2 выходит за пределы диапазона, определенного в шаге 3.
...