在MVC上使用ImageResizer自动提供@2x和@3x图像

Question

我们正在构建网站的主题在前端使用Retina.Js，它会根据用户设备自动尝试加载@2x和@3x图像，以这样的方式;

如果我们使用如下的图像调整器为桌面提供滑块;

/图片/home/幻灯片/幻灯片- 1. jpg ?宽度= 300

(其中1为图像的DbId)

如果访问者使用高dpi移动设备，该脚本会自动请求以下图像;

/图片/home/幻灯片/[e-mail] ?宽度= 300

/图片/home/幻灯片/[e-mail] ?宽度= 300

我们使用ImageResizer与SqlReader和DiskCache插件，使图像从数据库读取和缓存在磁盘上。

当脚本从服务器请求@2x和@3x命名约定图像时，ImageResizer当然会为这些图像返回错误，因为它无法在数据库中找到id为'1@2x'的图像，但幸运的是，我们能够通过使用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);
                }
            }                
        };

这样我们就可以提供桌面分辨率为@2x (or@3x)的图像了

但是我们无法实现的是改变@2x或@3x图像的分辨率。因为我们调用了image '?宽度=300'与querystring参数这些图像也作为桌面分辨率。

We try to change

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

对新计算的值没有影响。

在

下设置新值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图像的同时更改调整大小的设置?

提前致谢

Answer 1

ImageResizer提供了一个zoom参数，它为您做数学运算，本质上是将宽度和高度参数相乘。

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