3

JSカルーセルで画像を表示しています。画像は非常に大きいので、HTMLで縮小します。アスペクト比を維持するためにいくつかの計算を行います。結局、それらの大きな画像は品質が低下しますが。これらの画像はすでにサーバーに存在しており、元のファイルのサイズを変更することは想定されていないことに注意してください。

この品質低下の原因は何ですか？小さいサイズの画像に固執する必要がありますか？表示される最終的なサイズを大きくしますか？これが役立つコードです。現在、最大幅と高さはそれぞれ270と180です。これはすべてC＃です。

// srcccccc is the image file. Can be any kind of extension jpg, png, etc.
if (srcccccc != "")
{
    Globals.NavigateURL();
    string path = PortalSettings.HomeDirectory + srcccccc;
    using (System.Drawing.Image img = System.Drawing.Image.FromFile(@Server.MapPath(path)))
    {
        int[] newSizes = ResizeWithRatio(img);
        contentsall += "<img src=\"" + PortalSettings.HomeDirectory + srcccccc + "\" alt=\"Image "
            + folderidddin + "\" height=\"" + newSizes[1] + "px\"" + "\" width=\"" + newSizes[0] + "px\" />";
    }
}

// HTML is dynamically added later....

private int[] ResizeWithRatio(System.Drawing.Image img)
{
            int[] sizes = new int[2];
            if (img.Width > maxWidth || img.Height > maxHeight)
            {
                float ri = (float)img.Width / (float)img.Height;
                float rs = (float)maxWidth / (float)maxHeight;
                if (rs > ri)
                {
                    sizes[0] = (int)((float)img.Width * (float)maxHeight / (float)img.Height);
                    sizes[1] = maxHeight;
                }
                else
                {
                    sizes[0] = maxWidth;
                    sizes[1] = (int)((float)img.Height * (float)maxWidth / (float)img.Width);
                }
            }
            else
            {
                sizes[0] = img.Width;
                sizes[1] = img.Height;
            }
            return sizes;
}
4

2 に答える 2

3

あなたが抱えている問題は、画像をまったく拡大縮小していないことです。フルサイズの画像を取得して小さくレンダリングするようにWebブラウザに指示しています。残念ながら、ブラウザはこれがあまり得意ではなく、非常に単純なアルゴリズムを使用してこれを行うと思います。

解決策は、サーバー上の画像を拡大縮小することです。何らかの方法（ファイル名、IDなど）で画像参照を受け取り、クライアントに出力する前にサイズ変更を行うページハンドラーを用意することをお勧めします。次の質問は、C＃でのスケーリングを扱っています。

高品質の画像スケーリングライブラリ

于 2012-06-20T13:31:12.080 に答える
1

イメージサーバー側を縮小する場合は、このドキュメントを参照してください。これにより、ネットワークトラフィックが節約され、より高品質の画像が作成されます。

于 2012-06-20T13:29:54.893 に答える