Изменить размер изображения с помощью jQuery - PullRequest
Новая
       17

Изменить размер изображения с помощью jQuery

1 голос
/ 29 сентября 2010

Сценарий:

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

Пример: веб-сайт размещен по адресу www.mywebsite.com, и html изображений будет выглядеть примерно так: <img src=”http://www.otherwebsite.com” />.

Изображения с других серверов уже будут сжаты, поэтому они не будут очень тяжелыми ... хотя они будут иметь размер около 25 КБ каждый с размером 500x375 пикселей.

Цель:

Я хочу изменить их размер на стороне клиента с помощью jQuery.Таким образом, они превратились в миниатюры.

Существует два размера миниатюр: 310x140 и 80x80 пикселей.

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

Iзнаю, что я слишком требователенНо я подумал, что это «обычная» ситуация, с которой многие из вас, возможно, уже сталкивались… так что, возможно, есть какой-то плагин, который бы это делал.загрузка изображений «тяжелее», чем нужно, потому что, если бы у них до загрузки было 310x140 (это размер миниатюры), они были бы намного легче… но эй!Я не виноват, что проект был построен таким образом.

Исследование:

Я нашел что-то, что почти сделало то, что я хотел, за исключением «увеличения».Вы можете проверить, нажав здесь: http://joanpiedra.com/jquery/thumbs/.

1 Ответ

1 голос
/ 29 сентября 2010

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

определить максимальную ширину и максимальную высоту.

, поддерживая соотношение сторон, изменить их размер. 

  if ((h / w) < (maxH / maxW)) {
                $img.css('height', '');
                $mg.css('width', maxW);
            }
            else {
                $Img.css('height', maxH);
                $Img.css('width', '');
...