0

ユーザーが画像の領域をクリックしてドラッグすると、cropper.jsがうまく機能します。

ユーザーが画像の一部をクリックするだけで、cropper.js で画像の領域をトリミングするにはどうすればよいですか?

たとえば、ユーザーがどこをクリックしても、クリックした x、y 位置の周りに 50x50 の「トリミング ボックス」領域が作成されます。

現在のところ、.setCropData() メソッドを使用してクロップ ボックスの位置と寸法を設定できますが、cropend イベントの一部として「起動」することしかできません。

作物開始イベントは、最初のマウスダウン イベントをキャプチャするので、これには理想的な場所のように思えますが、このイベントの一部として setCropData() メソッドを起動することはできません。

私が知る限り、cropper.js が何かを行うためには、cropstart からcrop、そして最終的にcropend まで一連のイベントを進行する必要があります。つまり、マウスを何らかの方向にドラッグする必要があります。ユーザーがマウスをクリックするだけでそれ以上のドラッグ動作がなければ、cropstart イベントだけが発生します。

たとえば、テスト目的の単純なものとして、これは機能しません。

    cropstart: function(event) {
      let $canvas = $('#canvas-' + $cropperImageIdNumber);

      cropperInstance.setCropBoxData({left: 100, top: 100, width: 50, height: 50});

      console.log('cropstart CropBoxData');
      console.log(cropperInstance.getCropBoxData({}));
    },

マウスをクリックした後、コンソール ログは、cropBoxData が空のように見えることを報告し、トリミングは画像に描画されません。これは、作物イベントが技術的に開始されていないため、まだ何も設定されていないためだと思われます。

ただし、同じものをcropendイベントの一部として配置すると、期待どおりに機能します. ただし、違いは、「クリック」するだけではなく、実際に任意のサイズのクロップ ボックスをドラッグする必要があることです。

    cropend: function(event) {
      cropperInstance.cropped = true;

      let $canvas = $('#canvas-' + $cropperImageIdNumber);
      cropperInstance.setCropBoxData({left: 100, top: 100, width: 50, height: 50});

      console.log('cropend CropBoxData');
      console.log(cropperInstance.getCropBoxData({}));

寸法を手動で設定することにより、クロッパーを「モーションを通過させる」方法を考えていますが、通常のドラッグではなくクリックする方法はありますか? 前もって感謝します！

4

0 に答える 0