C# .NET : 컨테이너 div 요소 내부의 이미지 크기 조정

Question

div 요소와 img 태그가 div 안에 중첩되어있는 다음 마크 업 코드가 있습니다. 컨테이너 div는 너비, 높이, 위쪽 및 왼쪽 CSS 스타일 속성을가집니다.

원래 업로드 된 이미지의 너비와 높이는 컨테이너 div보다 크거나 작을 수 있습니다. 따라서 원래 업로드 된 이미지의 크기를 조정하고 크기를 조정해야하며 컨테이너 div의 테두리 안에 썸네일 이미지로 저장해야합니다. 그 크기를 조정 썸네일 이미지는 다음과 같은 마크 업에서 소스 (SRC)로 표시됩니다 :

사항 다른 .NET 폼 페이지에서

<div id="divContainer" style="width: 600px; height: 450px; top: 50px; left: 20px;"> 
    <img src="[my resized and well scaled thumbnail source]..." id="imgResizedThumnail" /> 
</div> 

는 사용자가 로컬 하드 디스크에서 원본 이미지를 업로드시키는 파일의 태그가있다. 업로드 된 이미지의 크기를 조정하고 최상의 축소 비율로 다른 축소판 이미지로 저장해야합니다. "최상의 scalling"은 thumbnail 이미지가 너비와 높이의 비례 비율을 가지며 축소판이 container div 내에 있어야 함을 의미합니다.

내 C# .NET 메소드는 다음과 같으며 그 메소드의 코드 로직에 대한 질문이 있습니다.

이

public static Image Resize(
     Image srcImage, 
     int newWidth, 
     int maxHeight, 
     int dpi = 72) 
    { 
     if(srcImage.Width<=newWidth) 
     { 
      newWidth = srcImage.Width; 
     } 

     var newHeight = srcImage.Height * newWidth/srcImage.Width; 
     if (newHeight > maxHeight) 
     { 
      newWidth = srcImage.Width * maxHeight/srcImage.Height; 
      newHeight = maxHeight; 
     } 

     var newImage = new Bitmap(newWidth, newHeight); 
     newImage.SetResolution(dpi, dpi); 

     using (var gr = Graphics.FromImage(newImage)) 
     { 
      gr.SmoothingMode = SmoothingMode.AntiAlias; 
      gr.InterpolationMode = InterpolationMode.HighQualityBicubic; 
      gr.PixelOffsetMode = PixelOffsetMode.HighQuality; 
      gr.DrawImage(srcImage, new Rectangle(0, 0, newWidth, newHeight)); 
     } 
     return newImage; 
    } 

Answer 1

이것은 내가 무엇을 사용 다음 div 태그의 크기에서 가장 많이 변하는 것을 계산합니다. 그런 다음 div 태그의 크기에 가장 덜 분산 된 치수를 스냅하고 이미지의 종횡비를 고려하여 다른 태그의 비율을 조정합니다.

물론 다른 방법이 있습니다. 예를 들어 종횡비를 신경 쓰지 않고 div 태그의 두 치수를 모두 스냅 할 수 있습니다.

Answer 2

나는 이런 식으로 뭔가를했을이 :

public void SaveThumbnailImageWithbestScaling(Image originalImage, int containerDivWidth, int containerDivHeight) 
{ 
    string thumbnailFilename = "myThumnailFileName"; 
    int thumbnailWidth = 0; 
    int thumbnailHeight = 0; 

    float imgWidth = (float)originalImage.Width; 
    float imgHeight = (float)originalImage.Height; 

    float scale_w = imgWidth/(float)containerDivWidth; 
    float scale_h = imgHeight/(float)containerDivHeight; 

    // Compute how much each scale diverge from 1 (1 means no scaling, which is desirable) 
    float variance_w = Math.Abs(1.0 - scale_w); 
    float variance_h = Math.Abs(1.0 - scale_h); 

    if (variance_w > variance_h) 
    { 
     // Height ratio is closer to 1 
     float aspect_ratio = imgWidth/imgHeight; 
     thumbnailHeight = containerDivHeight; 
     thumbnailWidth = (int)Math.Floor(aspect_ratio * imgWidth); 
    } 
    else 
    { 
     // Width ratio is closer to 1 
     float aspect_ratio = imgHeight/imgWidth; 
     thumbnailHeight = (int)Math.Floor(aspect_ratio * imgHeight); 
     thumbnailWidth = containerDivWidth; 
    } 

    Bitmap thumnailImage = CreateThumbnail(thumbnailFilename,int thumnailWidth, int thumnailHeight); 

    // 3. save thumbnail 
    SaveThumnail(thumnailImage); 
} 

알고리즘은 각 차원의 비율을 계산

은 ...

using System.Drawing; 

public void SaveThumbnailImageWithbestScaling(Image originalImage, int containerDivWidth, int containerDivHeight) 
{ 
    // input containerDivWidth and containerDivHeight are dynamic! 
    // 1. How can I calculate the scale variable? 
    double scale = ??? // how can I do the codes here? 

    // 2. Use that scale to determine the dimension of resized thumbnail image from  
    // the input originalImage for following variables "thumnailWidth" and "thumnailHeight"  

    string thumbnailFilename = "myThumnailFileName"; 
    int thumnailWidth = ??? // how can I do the codes here? 
    int thumnailHeight = ??? // how can I do the codes here? 

    Bitmap thumnailImage = CreateThumbnail(thumbnailFilename,int thumnailWidth, int thumnailHeight); 

    // 3. save thumbnail 
    SaveThumnail(thumnailImage); 
} 


public void Bitmap CreateThumbnail(string lcFilename,int lnWidth, int lnHeight) 
{ 
    ... 
} 

public void thumnailImage (Bitmap thumnail) 
{ 
    ... 
}