Fabric.js + canvasで画像一部を別のimgタグに切り出す(矩形領域の切り出し/crop)

下記のような画像から

screen.png

以下のように切り出す.

trimmed img.png

Fabric.js, JQuery を使って実現しています.(もっと賢い方法があるのかもしれませんが)

canvas.toDataURLを呼んで切り出したい領域のイメージをもらい、
それをimgタグのsrcにそのまま突っ込んで、それを表示します.

下記のサンプルコードでは画像を選択を押して、cropボタンを押すと、50~150, 50~150でトリミングした画像が表示されます.

  1. canvasの初期化
  2. イメージ選択後のコールバック
  3. cropボタンを押された時のコールバック

の順序で下記コードは実装しています.

 

 

About the author

コメントを残す