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

私はこのようなことをしたでしょう：

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 に答える
0

これは私が使用するものです：

    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 に答える