使用 jcrop 裁剪带有预览的图像

Posted 2023-02-25

【中文标题】使用 jcrop 裁剪带有预览的图像

【英文标题】：Cropping an image with a preview using jcrop

【发布时间】：2013-02-15 21:16:12

【问题描述】：

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

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

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