🌄

画像の切り抜きライブラリVue Cropperを使ってみた。

2021/07/31に公開

Vue Cropperについて

今回使用したのは以下のライブラリになります。
Vue製なのでVue環境であれば導入しやすいと思います。

Cropper.jsというライブラリがあり、こちらはJSのものになるので、JS環境であれば使う事ができます。

デモ
Cropper.jsはかなり老舗のライブラリのようで
画像の切り抜きに使う形になります。

今回紹介するもの以外にも以下のようなCropperをメインにしているライブラリは多数存在しています。
似た機能にはなりますが、使い勝手や微妙に異なる面もあるため要件に合わせて選ぶといいかと思います。

元々日本の方が開発したのではないようなので日本語の記事などは調べた限りなかったです。
英語のREADMEがあるのでこちらを見るか、同じくGithubにあるissueから英語の質問などを拾いつつ、使っていきました。

npm or yarnでインストール後

import VueCropper from 'vue-cropper/src/vue-cropper.vue'

でインポートし、Vueプロパティのcomponentsにセットします。
テンプレートでvue-cropperコンポーネントを使うだけで使用できます。

テンプレート

<template>
  <div>
    <vue-cropper>
    </vue-cropper>
  </div>
</template>

prop名	機能	デフォルト	想定入力値
img	画像ソース	null	url address / base64 / blob
outputSize	出力画像の大きさ	1	0.1 - 1
outputType	出力画像のタイプ	jpg (jpg need jpeg)	jpeg / png / webp
info	Cropエリアの大きさ表示	true	true / false
canScale	画像の拡大・縮小	true	true / false
autoCrop	Cropエリアの初期表示	false	true / false
autoCropWidth	Cropエリアの初期幅	parent's 80%	0~max
autoCropHeight	Cropエリアの初期高さ	parent's 80%	0~max
fixed	Cropエリアの大きさ変更	true	true / false
fixedNumber	Cropエリアの比率	[1 : 1]	[width : height]
full	Screenshot of whether to output the original map scale	false	true / false
fixedBox	Cropエリアの変更可否	false	true / false
canMove	画像の移動可否	true	true / false
canMoveBox	Cropエリアの移動可否	true	true / false
original	アップロード画像をオリジナルサイズで表示	false	true / false
centerBox	Cropエリアを画像外へ移動可否	false	true / false
high	デバイスのdpiに対応	true	true / false
infoTrue	出力画像の大きさがオリジナル画像かCropエリアか	false	true / false
maxImgSize	画像の最大幅、高さの制限	2000	0-max
enlarge	Picture output ratio multiplier based on screenshots	1	0-max(Don't be too big.)
mode	img render mode	contain	contain, cover, 100px, 100% auto