Обрезка с помощью 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 не работает.

Поэтому я прошу помощи, если кто-нибудь знает, как сделать обрезку, и я очень ценю ваши ответы!! Пожалуйста, дайте мне знать, если я не объяснил свой вопрос четко, и вам нужна дополнительная информация, чтобы решить эту проблему.

Заранее спасибо и извините за такой длинный вопрос. Хорошего дня!!

PS Я только что выучил 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 я использовал также адаптер jQuery Pixastic.