javascript - 使用 Jcrop 和 Pixastic 进行裁剪

Question

现在我正在建立一个图像处理网站，我正在使用 Pixastic 中的大部分功能，它们非常好。但是，我在想裁剪功能是否有任何改进。

我可以使用 Pixastic 中的裁剪功能，但我想通过光标裁剪图像。我不想像这样输入位置的值:

function cropImg()  {
Pixastic.process(document.getElementById("image"), "crop", {rect: {left: 50, top:50, width:50, height: 50}});

};

但是，我想不出如何使用jquery获取位置的值，例如offset()、e.pageX、e.pageY、mousedown()和mouseup()，所以我决定使用Jcrop 用于裁剪。但是，如果你们中的任何人都可以帮助我解决这个问题，那就太好了。

这是我的 Jcrop 代码:

$(document).ready(function(){
$('#image').Jcrop({
    onChange: showCoords,
    onSelect: showCoords
});
});
function showCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
}; 

这些 Jcrop 代码使我能够选择区域并告诉我位置的值，但它没有告诉我如何裁剪或我可以为该功能设置的按钮，所以我在想我是否可以结合 Pixastic和 Jcrop 是这样的:

function cropImg()  {
Pixastic.process(document.getElementById("image"), "crop", {rect: {left: $('#x').val(), top: $('#y').val(), width: $('#w').val(), height: $('#h').val()}});

};

我在想，如果 Jcrop 可以告诉我位置的值，我可以将这些值放入 Pixastic cropImg 函数中。

我把Pixastic 代码和Jcrop 代码分别放在两个文件里，但是无论我做什么，它们都不能一起工作。要么我可以选择图像，但 Pixastic 功能都不起作用，要么 Jcrop 不起作用。

因此，如果有人知道如何进行裁剪，我将寻求帮助，非常感谢您的回答!!如果我没有清楚地解释我的问题以及您需要更多信息来解决这个问题，请告诉我。

提前谢谢你，很抱歉问了这么长的问题。祝你有美好的一天!!

P.S 我一个月前刚学了 HTML、CSS 和 Javascript，但对其他编程语言一窍不通，所以如果你能详细解释一下或者给我一个更简单的答案，那就太好了!

Answer 1

这是我现在在项目中使用的代码。

var canvasImage = $(".editor canvas");
canvasImage.Jcrop({
    onSelect: function (coords) {
        canvasImage.pixastic("crop", {
            rect: {
                left: coords.x,
                top: coords.y,
                width: coords.w,
                height: coords.h
            }
        });
        this.release();
        this.disable();
    }
});

请注意，除了 Jcrop 和 Pixastic 之外，我还使用了 Pixastic jQuery 适配器。