3

jcrop を使用して、画像のトリミングされた領域の「ライブ」プレビューを作成しようとしています。

「クロップ選択」領域が宛先プレビュー div と同じ高さと幅である場合、選択領域の移動は完全に機能します。

ここで問題を確認してください: http://jsfiddle.net/fbaAW/

function showCoords(c) 
{
    var $this = this.ui.holder;


    var original = $this.prev();
    var preview = original.parent().find(".image");

    var oH = original.height();
    var oW = original.width();

    var pH = preview.height();
    var pW = preview.width();

    var sH = c.h;
    var sW = c.w;

    var differenceH = pH - sH;
    var differenceW = pW - sW;


    //preview.css('width', c.w);
    //preview.css('height', c.h);

    //preview.css("background-size", Math.round(oW + differenceW) + "px" + " " + Math.round(oH + differenceH) + "px");

    preview.css("background-position", Math.round(c.x) * -1 + "px" + " " + Math.round(c.y) * -1 + "px");
}

ご覧のとおり、いくつかのテストをコメントアウトし、このコードを適切に機能させる試みを行いましたが、この効果を得るために、位置とサイズの背景プロパティの関係に頭を悩ませることはできません。正しく動作するようにします。

4

1 に答える 1

7

選択範囲のサイズとプレビュー領域のサイズの間の水平方向と垂直方向の比率を計算します。

var rW = pW / c.w;
var rH = pH / c.h;

次に、それらをbackground-sizeおよびに適用しbackground-positionます。

preview.css("background-size", (oW*rW) + "px" + " " + (oH*rH) + "px");
preview.css("background-position", rW * Math.round(c.x) * -1 + "px" + " " + rH * Math.round(c.y) * -1 + "px");

http://jsfiddle.net/fbaAW/1/

たとえば、プレビュー サイズが jCrop 選択領域のサイズの 3 倍である場合、元の画像を 3 倍に拡大し、背景位置を定義するときに拡大縮小を補正したことを意味します。

于 2013-02-15T21:36:39.397 に答える