Есть ли способ использовать JavaScript для обрезки и изменения размера изображения перед его отображением?

Question

У меня есть куча изображений, хранящихся на стороннем сервере, которые я хочу загрузить и отобразить в виде миниатюр на веб-странице ...

Могу ли я использовать JavaScript, чтобы загрузить каждое изображение, обрезать и изменить его размеры, чтобы они были одинакового размера, а затем отобразить их в виде сетки на странице?

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

Answer 1

Вы можете поместить каждое изображение в контейнер блока с фиксированными размерами и overflow: hidden, тем самым эффективно обрезая их (вы также можете расположить изображение внутри контейнера с отрицательными значениями top и left, чтобы выбрать, какая частьизображение будет видно).Все это стандартная плата за проезд CSS.То же самое касается отображения элементов в сетке. См. Пример .

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

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

Answer 2

Возможно, это не совсем решение на основе Javascript или Jquery, но этот сценарий может очень помочь на веб-сайтах электронной коммерции или других типах сайтов, на которых страницы заполнены миниатюрами.Он имеет механизм кэширования, поэтому изображения обрабатываются только один раз: http://shiftingpixel.com/2008/03/03/smart-image-resizer/

Answer 3

JS не может напрямую обрезать / изменить размер изображения, если вы не используете тег <canvas>. Самое большее, он может имитировать кадрирование, помещая изображение в другой элемент с переполнением: скрытый и корректируя смещения / границы. Вы можете подделать изменение размера, установив атрибуты CSS высоты / ширины / масштаба изображения.

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

Answer 4

Javascript - это клиентский язык. Таким образом, изображения должны быть загружены в первую очередь, прежде чем JavaScript сможет контролировать их. Если вы загружаете много изображений, лучше создать серверный скрипт, который обрезает изображения перед их загрузкой.