在MVC上使用ImageResizer自動提供@ 2x和@ 3x圖像

我們構建網站的主題使用前端的Retina.Js，它會根據用戶設備自動嘗試加載@ 2x和@ 3x圖像;在MVC上使用ImageResizer自動提供@ 2x和@ 3x圖像

如果我們正在使用圖像調整器爲桌面服務我們的滑塊如下;

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

（其中1是圖像的DBID）

該腳本自動請求下面的圖像，如果訪問者是使用高dpi移動設備;

/Images/home/slides/[email protected]?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）提供圖像。

但是我們無法實現desires @ 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圖像？

由於提前，

來源

2016-10-20 Onur Buyukcaglar

-2

ImageResizer提供zoom參數，做數學對你來說，基本上是乘以寬度和高度paramters。

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

來源

2016-10-20 15:38:23

此答案現在位於VLQ隊列中。我認爲它確實回答了這個問題，但是您可能需要添加一點解釋。 –

感謝您的指導，這正是我們試圖完成的。 –

在MVC上使用ImageResizer自動提供@ 2x和@ 3x圖像

回答

相關問題