vue-cropperjsのオプションメモ

はじめに

vue-cropperjsでは呼び出し時にv-bindで各オプションを設定します。
template内での記載は以下のようになります。

<vue-cropper
  ref="cropper"
  :view-mode="2"
  :auto-crop-area="1"
  :aspect-ratio="16 / 10"
  :min-container-width="640"
  :min-container-height="360"
  :img-style="{ 'width': '500px', 'height': '500px' }"
  drag-mode="none"
/>

画像切り抜き時のアスペクト比を固定する

画像切り抜き時のアスペクト比を固定したい場合、
:aspect-ratio="width / height"
と設定すると比率が固定されたまま切り抜きを実行できます。
16:9の画像を設定する場合、
:aspect-ratio="16 / 9"
となります。

画像選択後のCropAreaを画像幅全体にする

画像を切り抜きしたい時に、画像サイズが適正でも、画像いっぱいに切り抜きウインドウが表示されていないとドラッグ&ドロップでウインドウを拡大してから確定しなくてはいけない手間がありました。
オプションで
:auto-crop-area="1"
を設定すると画像幅全体に切り抜きウインドウが表示されます。

• 設定前
  

• 設定後