Автоматическое предоставление изображений @2x и @3x с использованием ImageResizer в MVC

#c# #asp.net-mvc #imageresizer #retina.js #imageresizer-diskcache

#c# #asp.net-mvc #imageresizer #retina.js #imageresizer-diskcache

Вопрос:

Тема, в которой мы создаем наши веб-сайты, использует Retina.Js во внешнем интерфейсе, который автоматически пытается загрузить изображения @2x и @ 3x в соответствии с устройством пользователя таким образом, чтобы;

Если мы обслуживаем наши слайдеры для рабочего стола с помощью image resizer следующим образом;

/Изображения/ главная страница/слайды/слайд-1.jpg?ширина = 300

(в котором 1 является идентификатором DbId изображения)

Этот скрипт автоматически запрашивает следующие изображения, если посетитель использует мобильное устройство с высоким разрешением;

/Images/home/slides/slide-1@2x.jpg?width=300

/Images/home/slides/slide-1@3x.jpg?width=300

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

Когда скрипт запрашивает у сервера @2x и @3x именование конвективных изображений, конечно, ImageResizer возвращает ошибку для этих изображений, поскольку он не смог найти изображение с идентификатором ‘1 @ 2x’ в БД, но, к счастью, мы смогли преодолеть это препятствие с помощью конвейера.Переписать;

 ImageResizer.Configuration.Config.Current.Pipeline.Rewrite  = delegate (IHttpModule s, HttpContext context, ImageResizer.Configuration.IUrlEventArgs ev)
        {

            if (ev.VirtualPath.StartsWith(VirtualPathUtility.ToAbsolute("~/kitimages/"), StringComparison.OrdinalIgnoreCase))
            {
                if (ev.VirtualPath.Contains("@2x"))
                {
                    ev.VirtualPath = ev.VirtualPath.Replace("@2x", string.Empty);
                }

            }                

        };
  

так что теперь мы можем обслуживать изображения с разрешением @ 2x (или @3x таким образом) на рабочем столе.

Но чего мы не смогли добиться, так это изменения разрешения желаемого изображения @2x или @3x. Поскольку мы вызываем изображение ‘?width = 300’ с параметром querystring, эти изображения также использовались в качестве разрешения рабочего стола.

Мы пытались изменить

 ImageResizer.Configuration.Config.Current.Pipeline.ModifiedQueryString["width"] 
  

к вновь вычисленному значению, которое не имело никакого эффекта.

Установите новое значение в ширину в

 context.Items["resizer.modifiedQueryString"] 
  

свойство, которое не имело никакого эффекта.

Также безуспешно пытался использовать следующее;

 ImageResizer.Configuration.Config.Current.Pipeline.Modify( new ResizeSettings() { Width = 600 } );
ImageResizer.Configuration.Config.Current.CurrentImageBuilder.SettingsModifier.Modify(new ResizeSettings() {Width = 600});
ImageResizer.Configuration.Config.Current.Pipeline.GetImageBuilder().SettingsModifier.Modify(new ResizeSettings() { Width = 600 });
  

Теперь вопрос в том, есть ли какой-либо способ изменить настройки изменения размера на лету при использовании плагинов SqlReader и DiskCache и предоставлять изображения @2x и @3x с правильными разрешениями?

Заранее спасибо,

Ответ №1:

ImageResizer предлагает zoom параметр, который выполняет математические вычисления за вас, по существу, умножая параметры ширины и высоты.

 ev.QueryString["zoom"] = 2; // 3, etc, 
  

Комментарии:

1. Этот ответ теперь находится в очереди VLQ. Я думаю, что это действительно отвечает на вопрос, но вы можете добавить небольшое объяснение.

2. Спасибо за руководство, это именно то, чего мы пытаемся достичь.