javascript - 使用 jcrop 裁剪带预览的图像

Question

我正在使用 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");
}

如您所见，我已经注释掉了我的一些测试并尝试让这段代码正常工作，但我只是无法理解位置和大小背景属性之间的关系，以便使此效果正常工作。

Answer 1

计算选区大小与预览区域大小的横纵比:

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 倍，并在定义背景位置时补偿缩放比例。