1

現在、私は画像操作用の Web サイトを構築しており、Pixastic のほとんどの機能を使用していますが、それらは非常に優れています。ただ、クロッピング機能の改善はないかと考えていました。

Pixastic でトリミング機能を使用できますが、カーソルを介して画像をトリミングしたいと考えています。次のような位置の値を入れたくありません。

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

};

しかし、offset()、e.pageX、e.pageY、mousedown()、mouseup()など、jqueryを使って位置の値を取得する方法が分からなかったので、トリミングには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 のコードを別々に 2 つのファイルに入れましたが、どうやっても連携できません。画像を選択できても Pixastic の機能がまったく機能しないか、Jcrop が機能しません。

したがって、トリミングを機能させる方法を知っている人がいれば助けを求めています。あなたの答えに感謝します!! 質問を明確に説明していない場合、およびこれを解決するために必要な情報を教えてください。

事前に感謝し、そのような長い質問を申し訳ありません. すてきな一日を！！

PS HTML、CSS、Javascript を 1 か月前に学習したばかりですが、他のプログラミング言語はまったく知らないので、詳しく説明したり、簡単な答えを教えていただければ助かります。

4

1 に答える 1

2

これが私のプロジェクトで現在使用しているコードです。

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 アダプターも使用したことに注意してください。

于 2012-11-14T16:45:46.297 に答える