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-sizeand 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 回答