円型での切り取りも可能な画像クロップライブラリ・「Cropme」

Cropme

CropmeはJS製の画像クロップライブラリです。円型での切り取りや回転後の切り取りなどが可能となっています。バニラでもjquery併用でも対応可能です。

従来のクロップツールは画像が固定されていて、切り取る範囲を動かしたり拡大縮小するものが殆どですが、こちらは切り取る範囲を固定して、ドラッグで画像を動かしたり拡大、縮小、回転等を施して切り取るスタイルとなっています。

動作サンプル

適当に作った、動作確認出来るだけのサンプルです。切り取り範囲が固定されており、画像の回転等で切り取り範囲を変更する、みたいな流れで切り取ります。

ライブラリサイトではオプションを作成できるようにもなっているので割と手軽に導入できるんじゃないかなと思います。

var example = $('#container').cropme();//要素指定
  example.cropme('bind', {
    url: 'https://picsum.photos/600/500'//画像指定
  });

example.cropme('reload', {
  "container": {//コンテナのサイズ
    "width": 600,
    "height": 500
  },
  "viewport": {//切り取り範囲設定や形状指定
    "width": 200,
    "height": 200,
    "type": "circle",
    "border": {
      "width": "2",
      "enable": true,
      "color": "#fff"
    }
  },
  "zoom": {//拡大可能にするかどうか等
    "enable": true,
    "mouseWheel": true,
    "slider": false
  },
  "rotation": {//回転可能にするかどうか等
    "slider": true,
    "enable": true,
    "position": "left"
  },
  "transformOrigin": "viewport"

});

ライセンスは記載ないので開発者にお問い合わせください

Cropme