使用Jcrop和Pixastic进行裁剪
现在我正在建立一个用于图像处理的网站，我正在使用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不起作用。
因此，我正在寻求帮助，如果有人知道如何使裁剪工作，我非常感谢你的答案！如果我没有清楚地解释我的问题，请让我知道你需要更多的信息来解决这个问题。
提前谢谢你，很抱歉问了这么长的问题。祝你一天愉快！！
附注:我一个月前才学会HTML，CSS和Javascript，但根本不知道其他编程语言，所以如果你能详细解释或给我一个更简单的答案，那就太好了！
回答 1
Stack Overflow用户
发布于 2012-11-14 16:45:46
下面是我现在在项目中使用的代码。
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适配器。
https://stackoverflow.com/questions/12102849
复制相似问题
腾讯云开发者
