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元素内的图像的大小

回答

相关问题