0

我有以下标记代码，其中包含一个容器 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 表单页面中，有一个文件标签让用户可以从本地硬盘上传原始图像。该上传的图像需要调整大小并保存为另一个具有最佳缩放比例的缩略图图像。“最佳缩放”意味着缩略图图像具有宽度和高度的比例，并且缩略图必须位于容器 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)
{
   ...
}
4

2 回答 2

0

This is what I use:

    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-26T13:55:07.283 回答
0

我会做这样的事情：

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-26T14:36:00.290 回答