html5-canvas - HTML5 キャンバス要素の場合の jcrop プラグインの使用方法

Question

私はこのキャンバスのものに慣れていません.最近私のプロジェクトでは、ユーザーがサーバーに画像をアップロードすると、画像がキャンバス要素で動的にプレビューされます.今、私はその一部をトリミングしたいと思います.jcropプラグインを使用しましたが、使用しませんトリミングされた領域を取得する方法を知っています。jcrop の使用に関するマイナーなヘルプも大歓迎です。

前もって感謝します

Answer 1

jcrop を使用すれば、キャンバスのことを気にする必要はありません。

このようなイメージを作成するだけです

<img src="myimage.jpg" id="cropbox" />

あとは jcrop がやってくれます。次のように使用します（必要なオプションを追加します）：

$('#cropbox').Jcrop();

公式ウェブサイトのオプションとチュートリアルの完全なリスト: http://deepliquid.com/projects/Jcrop/demos.php

編集 ：

トリミングしたいキャンバスがある場合は、JCrop を使用しないでください。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

パラメータ Image は canvas オブジェクトにすることができます。次に、キャンバスを画像に抽出するには、toDataURL 関数を使用します。

完全なドキュメントは、mozilla MDN https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_imagesで入手できます。

Answer 2

jcrop-canvas は非常に有望に見えます: https://github.com/andrewlin12/jcrop-canvas