f:id:kic-yuuki:20190602170128p:plain

TwitterやInstagramで画像アップロードする際、画像の拡縮や比率で切り取りといったトリミング機能があると思います。

今回、仕事で上記のような要件が発生したため、画像トリミングができるVueコンポーネントがないか調査しました。

この記事なに？ 🤔

この記事では、Vue.jsで画像トリミング可能なコンポーネントを調査したときのメモと使ってみた所感について記載します。

コンポーネントの紹介

今回調査したコンポーネントは、以下2つです。

CodeSandboxを使い、それぞれのリポジトリのポータルサイト等を参考にデモを作成しました。

早く挙動を確認されたい方は、以下でもを参照していただいた方がよいかなと思います。

公式で用意されているデモはこちら。

デフォルトでドロップダウンに対応していて、拡縮・回転に対応していて使い勝手が良い印象です。

デモサイトにて、モバイルブラウザにもサポートされていることも明記されています。

公式で用意されているデモはこちら。

Cropper.jsという、ピュアなJavaScriptを用いた画像トリミングライブラリをラッパーし、プロパティをVue.jsライクに指定できるようにしたコンポーネントです。

デフォルトではドロップダウンには対応していません。

Canvas領域に画像を表示、選択範囲を指定して縦横幅を指定、切り取るようなイメージです。

選択範囲はアスペクト比を維持した形で指定することもできます。

モバイルブラウザでも、特に使い勝手が悪いとは感じませんでした。

調査は以上になります。

個人的には、アスペクト比を指定して選択範囲を指定できるvue-cropperjsの方が使い勝手が良いと感じました。

それに、ラッパー元のCropper.jsのスター数も5000を超えている（2019/06時点）ので、それなりに安心して使用できる気もします。

（デフォルトでドロップダウン出来ないという件も、自前で実装すれば済む話ですしね。。。）

デモを作成する際、以下の記事を参考にさせていただきました。