Servir automatiquement des images 2x et @ 3x en utilisant ImageResizer sur MVC

Question

Le thème que nous construisons nos websties utilise Retina.Js sur le frontend, qui essaie automatiquement de charger @ 2x et @ 3x images en fonction de l'appareil des utilisateurs de telle sorte que;

Si nous servons nos curseurs pour le bureau en utilisant le resizer d'image comme suit;

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

(où 1 est le dbid de l'image)

Ce script demande automatiquement les images suivantes si le visiteur est en utilisant un dispositif mobile à haute résolution;

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

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

Nous sommes en utilisant ImageResizer avec SqlReader et DiskCache Plugins, de sorte que les images lues à partir de la base de données et mis en cache sur le disque. Quand le script demande @ 2x et @ 3x nommant des images de convetion du serveur, ImageResizer a bien sûr retourné une erreur pour ces images puisqu'il n'a pas pu trouver une image avec l'ID '1 @ 2x' dans la db, mais heureusement nous avons pu surmonter cet obstacle en utilisant Pipeline.Rewrite;

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); 
       } 

      }     

     }; 

de sorte que maintenant nous sommes en mesure de servir les images qui sont @ 2x (ou @ 3x de cette manière) sur la résolution du bureau.

Mais ce que nous n'avons pas pu obtenir qui change la résolution de l'image desirs @ 2x ou @ 3x. Comme nous appelons l'image '? Width = 300' avec le paramètre querystring, ces images ont également servi de résolution de bureau.

Nous avons essayé de changer

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

à cette nouvelle valeur qui n'a eu aucun effet.

Set nouvelle valeur à la largeur sous

context.Items["resizer.modifiedQueryString"] 

propriété qui n'a eu aucun effet.

Également essayé d'utiliser ce qui suit sans aucune chance;

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 }); 

Maintenant, la question est; est-il possible de modifier les paramètres de redimensionnement à la volée en utilisant les plugins SqlReader et DiskCache et de diffuser des images 2x et @ 3x avec les bonnes résolutions?

Merci à l'avance,

Answer 1

ImageResizer offre un paramètre zoom qui fait le calcul pour vous, multipliant essentiellement les paramters de largeur et de hauteur.

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