使用jcrop使用预览裁剪图像

Question

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

如果“作物选择”区域的高度和宽度与目标预览格的高度和宽度相同，则所选区域的移动完美。

退房这里的问题：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倍，则表示您已经缩放o立方形图像减去3，并在定义背景位置时补偿缩放比例。