Как изменить размер изображения автоматически в веб-приложении? - PullRequest
Новая
       23

Как изменить размер изображения автоматически в веб-приложении?

3 голосов
/ 24 августа 2011

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

Ответы [ 4 ]

3 голосов
/ 25 октября 2013

Adobe Business Catalyst будет интерпретировать определенные параметры в URL-адресе src тега img как инструкцию по изменению размера изображения перед отправкой его клиенту.Эти параметры:

  • Action=thumbnail
  • Width (целое число)
  • Height (целое число)
  • algorithm (proportional | fill | fill_proportional | proportional_noupscale)
    • proportional сохраняет соотношение сторон и увеличивает изображения меньшего размера.Это значение по умолчанию.
    • fill сжимает изображения для подгонки и увеличивает изображения меньшего размера.
    • fill_proportional уменьшает изображения по мере необходимости, чтобы получить только одну ось внутризаданные размеры;любые дополнительные пиксели на другой оси симметрично обрезаются.Он не увеличивает изображения меньшего размера.
    • proportional_noupscale всегда возвращает изображение с тем же соотношением сторон, что и у оригинала, вставляет отступ, а не масштабирование, и всегда будет полностью соответствовать указанным размерам - дополнительное заполнениеобрезается для сохранения соотношения сторон.
  • Format (png | jpg | gif)
    • Этот параметр определяет тип изображения, возвращаемый послеповторное масштабирование.

Пример: <img src="{tag_yourImageFieldName_value}?Action=thumbnail&Width=320&Height=100&algorithm=fill">

Это вставит изображение из поля yourImageFieldName в веб-приложение и раздавит его до размера 320пикселей в ширину на 100 высот.Добавление _value к тегу заставляет BC возвращать только URL, без какой-либо дополнительной разметки.

Ссылка: Программное создание миниатюр из полноразмерных изображений

1 голос
/ 25 февраля 2015

Мне удалось сделать это с помощью небольшого Javascript и Jquery 

$('.div img').attr('src', function() {
    return  this.src + '?Action=thumbnail&Width=675&Height=503';
});//resizing images

Надеюсь, это поможет .. Сделано для меня!

0 голосов
/ 02 сентября 2013

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

Пример: /path/to/my/image.jpg,370,170

Источник: http://iamtheshadowonthesun.blogspot.com/2013/09/adobe-business-catalyst-how-to-specify.html

0 голосов
/ 20 августа 2013

Вы захотите поместить тег изображения в другой элемент, например {tag_image}

Затем вы можете установить '.image img {max-width: 100%}' в вашей таблице стилей, чтобы изображение былоникогда не превышайте ширину контейнера и установите ширину в div изображения, чтобы решить, насколько большим он будет.

...