問題タブ [cropper]

Kendo Upload コンポーネントが 2 回目のアップロードを実行することになっている場合、onUpload イベント ハンドラは起動されません。

私は剣道アップロードをcropperjs ( https://github.com/fengyuanchen/cropperjs/blob/master/README.md )で使用して画像をアップロードし、トリミングしてからサーバーに送信します。画像が大きすぎる場合、サーバーはエラーを送信します。ユーザーは、別のトリミング領域を選択して、画像を再度送信する必要があります。最後のステップでは何も起こりません。

画像をトリミングしてアップロードする方法は次のとおりです

次に、onUpload ハンドラーで、最初にトリミングされた画像がトリミングされた画像に置き換えられます。

サーバー上でエラーが送信されます：

エラーは onError プロセス ハンドラで処理されます。

その後、ユーザーは既に選択されている画像を切り取ることができます。そして、トリミングされた領域を変更した後、上記の手順が繰り返されることが期待されます。しかし$("#file").data("kendoUpload").upload();、最初のコード ブロックの後では何も起こりません。ただし、onUpload イベント ハンドラーを呼び出す必要があると思います。

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

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

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

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

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

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

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

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

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

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

使用しようとしていますcropper.js:

https://github.com/fengyuanchen/cropperjs
https://fengyuanchen.github.io/cropperjs/

index.phpルート レベルで 作成したファイルをダウンロードして解凍した後:

コンソール：

index.js

何が問題なのですか？