C＃.NET：調整容器div元素內的圖像的大小

我有以下標記代碼，它具有一個容器div元素和嵌套在div內的img標記。容器div具有寬度，高度，頂部和左側CSS樣式屬性。C＃.NET：調整容器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表單頁面，有一個文件標籤讓用戶從本地硬盤上傳的原始圖像。上傳的圖像需要調整大小並保存爲具有最佳縮放比例的另一個縮略圖。「最佳縮放」意味着縮略圖圖像具有寬度和高度成比例的比例，並且縮略圖必須位於容器格內。

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

來源

2012-05-26 user1219702

這是我用：

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

來源

2012-05-26 13:55:07 Chev

我會做這樣的事情：

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標籤的尺寸即可。

來源

2012-05-26 14:36:00

C＃.NET：調整容器div元素內的圖像的大小

回答

相關問題