1

さまざまなサイズの画像のアップロードを許可する作業を行ってから、サムネイル用に画像の事前定義された領域をトリミングできるようにします。

サムネイルのサイズは 150x150 に事前定義されています。Jcrop.jsツールを 使用して画像のセクションを選択します。

問題：

レンダリングされた画像に設定された高さ/幅を実装することにより、アップロードされた画像を元の画像よりも小さいサイズで表示する場合、トリミングする領域を選択するときに使用される倍率があります。

トリミング領域を比例して縮小するか、表示されたサイズと比較して実際の画像のサイズに合わせて画像を拡大縮小する必要があります。

質問：

ブラウザに表示された画像と元の画像の縮尺をどのように把握すればよいですか? 現在、次のコードを使用して画像を保存していますが、スケーリングをどのように考慮しますか?

public static Image CropImage(Image originalImage, int x, int y, int width, int height)
    {
        var bmp = new Bitmap(width, height);
        bmp.SetResolution(originalImage.HorizontalResolution, originalImage.VerticalResolution);

        using (var graphic = Graphics.FromImage(bmp))
        {
            graphic.SmoothingMode = SmoothingMode.AntiAlias;
            graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
            graphic.PixelOffsetMode = PixelOffsetMode.HighSpeed;

            graphic.DrawImage(originalImage, new Rectangle(0, 0, width, height), x, y, width, height, GraphicsUnit.Pixel);

            return bmp;
        }
    }

ボーナス質問:

私が発見したもう 1 つの問題は、新しい Bitmap を作成するときに元のファイルの ImageFormat を転送する効率的な方法がないようで、ImageFormatMemoryBMPBitmap.Save(memorystream, original rawformat) を呼び出そうとすると爆発することです。ビットマップの RawFormat にはセッターがありません。

では、新しいビットマップにフォーマットを設定するにはどうすればよいでしょうか?

4

1 に答える 1

0

おそらく、この問題は純粋にフロントエンドで解決されると思います。これにはサーバー側を使用する必要はありません。

Jcrop にはスケール ファクタ ハンドラが組み込まれています。

http://deepliquid.com/content/Jcrop_Sizing_Issues.html

私が理解しているように、これを2つの方法で使用できます。フロントエンドで「ボックスサイジング」を使用して画像を「サイズ変更」するか、画像の「トゥルーサイズ」を指定すると、倍率が計算され、独自に座標が処理されます。

ボックスのサイズ 

$('#cropbox').Jcrop({ boxWidth: 450, boxHeight: 400 });

実寸

$.Jcrop('#cropbox',{ trueSize: [500,370] });

true size メソッドを使用すると、API メソッドを使用して jcrop を呼び出す必要があります: http://deepliquid.com/content/Jcrop_API.html#API_Invocation_Method

var jcrop_api,
options = { trueSize: [500,370] };

$('#target').Jcrop(options,function(){
jcrop_api = this;
});

幸運を！

于 2013-03-28T19:27:13.930 に答える