MVC에서 ImageResizer를 사용하여 @ 2x와 @ 3x 이미지를 자동으로 게재

Question

우리 웹 사이트를 구성하는 테마는 사용자 장치에 따라 @ 2x 및 @ 3x 이미지를 자동으로로드하려고 시도하는 프론트 엔드에서 Retina.Js를 사용합니다.

다음과 같이 이미지 리사이저를 사용하여 데스크톱 용 슬라이더를 제공하는 경우,

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

는

는 방문자가이 스크립트는 자동으로 다음 이미지를 요청

경우 (어느 하나의 화상의 DBID이다) 높은 dpi 모바일 장치 사용

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

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

우리는 ImageResizer를 SqlReader 및 DiskCache Plugins과 함께 사용하여 이미지를 데이터베이스에서 읽고 디스크에 캐시합니다.

스크립트가 서버에서 @ 2x와 @ 3x 명명 이미지를 요청하면 당연히 ImageResizer는 db에서 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 이미지의 욕망을 해결할 수 없었습니다. 우리는 querystring 매개 변수를 사용하여 이미지 '? 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은 본질적으로 너비와 높이 paramters를 곱하여, 당신을 위해 수학을하는 zoom 매개 변수를 제공합니다.

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