Question

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

如果我们使用图像缩放器为桌面提供滑块，如下所示;

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

（其中1是图像的DbId）

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

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

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

我们正在使用带有SqlReader和DiskCache插件的ImageResizer，以便从数据库读取图像并缓存在磁盘上。

当脚本从服务器请求@ 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（或以这种方式@ 3x）的图像。

但是我们无法实现欲望@ 2x或@ 3x图像的改变分辨率。由于我们使用查询字符串参数调用图像'？width = 300'，因此这些图像也可用作桌面分辨率。

我们试图改变

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图像？

提前致谢，

Answer 1

ImageResizer提供了一个zoom参数，可以为您计算数学，实际上是宽度和高度参数的乘积。

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

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

1 个答案: