下記のような画像から
以下のように切り出す.
Fabric.js, JQuery を使って実現しています.(もっと賢い方法があるのかもしれませんが)
canvas.toDataURLを呼んで切り出したい領域のイメージをもらい、
それをimgタグのsrcにそのまま突っ込んで、それを表示します.
下記のサンプルコードでは画像を選択を押して、cropボタンを押すと、50~150, 50~150でトリミングした画像が表示されます.
- canvasの初期化
- イメージ選択後のコールバック
- cropボタンを押された時のコールバック
の順序で下記コードは実装しています.