C# .NET: изменение размера изображения внутри элемента div контейнера

Question

У меня есть следующие коды разметки, в которых есть элемент div контейнера, и тег img, вложенный внутри div. У контейнера div есть свойства стиля ширины, высоты, верхнего и левого CSS.

Первоначально загруженное изображение имеет произвольную ширину и высоту, которые могут быть больше или меньше контейнера div. Таким образом, первоначально загруженное изображение должно быть изменено и масштабировано и сохранено в виде миниатюры, чтобы сидеть в границах контейнера div. Это изменяется уменьшенное изображение будет показано в качестве источника (SRC) в следующих пометок:

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

В другой .NET страницу формы, есть файл тегов, позволяя пользователям загружать исходное изображение с локального жесткого диска. Это загруженное изображение должно быть изменено и сохранено как другое уменьшенное изображение с наилучшим масштабированием. «Наилучшее сканирование» означает, что уменьшенное изображение имеет пропорциональное соотношение ширины и высоты, а миниатюра должна находиться в контейнере div.

Мой метод C# .NET выглядит следующим образом, и у меня есть вопросы о логике кода в этом методе.

...

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) 
{ 
    ... 
} 

Answer 1

Это то, что я использую:

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 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); 
} 

Алгоритм вычисляет отношение каждого измерения , затем определяет, какой из них больше всего отличается от измерения тега div. Затем он начинает привязывать измерение с наименьшей дисперсией к размеру тега div и масштабировать другой, чтобы оценить соотношение сторон изображения.

Конечно, есть другие способы сделать это, вы можете, например, не заботиться о соотношении сторон и просто привязать оба измерения к тегам div.