Почти в каждом веб-проекте мы сталкиваемся с задачей показывать те или иные изображения в разных размерах. Всё просто — изображение должно показываться в размере, требуемом контекстом. Если вы разрабатываете каталог с разными представлениями, то таких контекстов может быть много. А возможно, что потребуется сделать размер картинки адаптивным по отношению к размеру окна браузера (например, так делают Picasa Web Albums).
Я расскажу о способе решить эту проблему раз и навсегда.
Что мы хотим
В простейшем случае мы хотим использовать URL картинок в таком виде:
<img src=”/img/photo.jpg@100x100”/>
Это должно отображать картинку размером 100 x 100.
Реализация
Самый прямой способ решить эту проблему — модуль для ASP.NET, который будет на лету изменять размеры картинки и кешировать результат. Сразу отмечу, что естественно я не первый, кто озаботился этой проблемой. Но решение, которое предлагаю я, на мой взгляд проще в использовании, понимании и модификации.
Код
Итак, чтобы всё работало, нам понадобится собственно сам класс модуля и одна строчка в Web.config.
Модуль хоть и невелик, но выкрадывать сюда простыню кода смысла тоже большого нет.
Поэтому я создал gist c кодом. Скопируйте этот код себе в проект (например в App_Code).
Теперь короткие настройки в вашем Web.config. Добавьте в тег <modules> или <httpModules> (последний, если вы используете ASP.NET Devopment Server) такую строчку:
<add name="ImageResizeModule" type="GarageTools.ImageResizeModule" />
Всё готово.
Используем
Как вы уже догадались, изменить до нужных размеров любую картинку на вашем сайте можно простым добавлением @ширинаxвысота в конец адреса картинки.
Но есть ещё несколько модификаторов, которые помогут в разных ситуациях. В конец URL можно дописать такие буквы-модификаторы:
- s — модуль не будет увеличивать картинку, если она меньше требуемых размеров.
- c — модуль будет следить чтобы размер результирующей картинки был строго требуемого размера — если необходимо, он добавит белые поля по горизонтали или вертикали.
- p — модуль вернёт PNG вместо JPEG.
Например вот так: /img/aspnet.png@150x100sc.
Тонкие настройки и модификация
Настроить время серверного и клиентского кеширования, директорию хранения временных файлов и степень сжатия для результирующих картинок можно в шапке класса.
Код модуля линеен, и легко поддаётся модификации. Например, для безопасности вы можете задать ограниченный список возможных значений для параметров ресайза. Или усложнить настройки клиентского кеширования (что само по себе всегда большое пространство для творчества).
Приятного использования.
Автор: bitmap
