Question

我有以下标记代码，其中包含容器div元素和嵌套在div中的img标记。容器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表单页面中，有一个文件标记，允许用户从本地硬盘上传原始图像。上传的图像需要调整大小并保存为具有最佳缩放比例的另一个缩略图。 “最佳scalling”表示缩略图图像的宽度和高度成比例，缩略图必须位于容器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标签的尺寸。

C＃.NET：调整容器div元素内的图像大小

2 个答案: