Question

我正在使用jcrop并尝试对图像上的裁剪区域进行“实时”预览。

如果“裁剪选择”区域与目标预览div的高度和宽度相同，则所选区域的移动将完美运行。

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

使用jcrop使用预览裁剪图像

1 个答案: