0

初めてjcropを使用しています。画像のサイズとトリミングに問題があります。ユーザーが 1366x768 以上の画像をアップロードすると、自分のページでプレビューします。作物選択のプレビューもあり、正常に動作します。位置を送信すると、うまくトリミングされます（元の画像サイズを使用する場合です）。
しかし、ページに大きな元の画像を表示したくありません。ユーザーは、元の画像、プレビュー、送信ボタンを 1 つのビューに表示する必要があります。したがって、画像が 1366x768 の場合、画像を小さくする必要があります。683x368 のように表示したくありません。しかし、ここに問題があります。画像タグのトリミングで幅と高さを設定すると、うまく機能しなくなりました。問題のコードと画像プレビューを貼り付けます。

jQuery(window).load(function () {

            jQuery('#cropbox').Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                setSelect: [0, 0, 540, 300],
                allowResize: true, 
                 aspectRatio: 2
            });

        });

        function showPreview(coords) {
            if (parseInt(coords.w) > 0) {
                var rx = 540 / coords.w;
                var ry = 300 / coords.h;

                jQuery('#preview').css({
                    width: Math.round(rx * 683) + 'px',
                    height: Math.round(ry * 368) + 'px',
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                });
            }

            $('#x').val(coords.x);
            $('#y').val(coords.y);
            $('#w').val(coords.w);
            $('#h').val(coords.h);
        }

        </script>
</head>
<body>
    <div>        
        <p style="width: 540px; height: 300px; overflow: hidden; float:left;">
            <img id="preview" src="../../Content/Images/Full/Leopard.jpg" />
        </p>
        <p style="float:left;">
            <img id="cropbox" width="683px" height="368px" src="../../Content/Images/Full/Leopard.jpg" />
        </p>

        <p>
            @using (@Html.BeginForm("PostPicture", "Home"))
            {
                <input type="hidden" id="x" name="x" />
                <input type="hidden" id="y" name="y" />
                <input type="hidden" id="w" name="w" />
                <input type="hidden" id="h" name="h" />
                <button type="submit">
                    Send</button> 
            }
        </p>

ここに画像の説明を入力

これは 2 番目のエラーです。X と Y に 2 を掛けた後です。 ここに画像の説明を入力

これは asp.net バックエンド コードです。

public ImageResult PostPicture(int x, int y, int h, int w)
        {            
            x = x * 2;
            y = y * 2;

            Image image = Image.FromFile(Path.Combine(this.Request.PhysicalApplicationPath, "Content\\Images\\Full\\Leopard.jpg"));
            Bitmap cropedImage = new Bitmap(w, h, image.PixelFormat);
            Graphics g = Graphics.FromImage(cropedImage);

            Rectangle rec = new Rectangle(0, 0,
                                w,
                                h);

            g.DrawImage(image, rec, x, y, w, h, GraphicsUnit.Pixel);
            image.Dispose();
            g.Dispose();

            string savedFileName = Path.Combine(
                   AppDomain.CurrentDomain.BaseDirectory,
                   "Content", "Images", "Full",
                   Path.GetFileName("cropped.jpg"));

            cropedImage.Save(savedFileName);

            return new ImageResult { Image = cropedImage, ImageFormat = ImageFormat.Jpeg };
        }
4

2 に答える 2

1

css style 属性で画像サイズを設定してみてください:

<img id="cropbox" style="width:683px;height:368px" src="../../Content/Images/Full/Leopard.jpg" />

おそらく、より良い解決策は、サーバー上の画像を目的のサイズにサイズ変更し、元の画像全体ではなく、サイズ変更された画像をユーザーに表示することです。これにより、画像が小さくなるため、ブラウザーのダウンロード時間も短縮されます。

于 2011-09-30T20:09:41.673 に答える
1

渡されたトリミング座標を調整する必要があります。プレビュー用に画像のサイズを変更した比率に従って、それらを調整する必要があります。そのため、イメージ プレビューを元の 50% に縮小すると、切り抜きの実際の座標は (x*2, y*2) の 2 倍になります。

于 2011-09-30T20:11:57.447 に答える