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

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

我们将 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（或@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 图像

Automatically serving @2x and @3x images using ImageResizer on MVC

c#

asp.net-mvc

imageresizer

retina.js

imageresizer-diskcache