Vue Croppa で、画像の切抜き機能をつける（QuasarFramework(Vue.js) + Firebase環境)

Vue Croppaという、めっちゃ便利そうな画像の切抜き機能がついたパッケージを発見したので、そちらを使用して切抜き機能を実装してみます。ズームや回転などもできるようで、かなり便利そうです。プロフィール画面の作成などで使いやすそうだなと思いました。

参考

vue-croppaの公式サイト:
https://zhanziyang.github.io/vue-croppa/#/

前提

• macOS High Sierra 10.13.2
• npmがinstallされている
• Firebaseアカウントを持っている

Vue-Copperの設定

Vue-Croppaをinstallする

$ npm install --save vue-croppa

src/main.js に追記する。

import Vue from 'vue'
import Croppa from 'vue-croppa'
import 'vue-croppa/dist/vue-croppa.css'
...
Vue.use(Croppa)

これで準備はできました。

Vue.jsのcomponentに実装してみる。

<template id="">
...
  <croppa v-model="myCroppa" canvas-color="transparent"></croppa>
  <button @click="generateImage">画像作成</button>
  <br>
  <img class="output" :src="imgUrl" >
...
</template>

<script type="text/javascript">
data: {
  myCroppa: null,
  imgUrl: ''
},
methods: {
  generateImage: function() {
    let url = this.myCroppa.generateDataUrl()
    if (!url) {
      alert('no image')
      return
    }
    this.imgUrl = url
  }
}
</script>

これで、画像の加工 && 加工した画像を出力できるようになりました。実装簡単ですね！

Vue.js(QuasarFramework) + Firebaseで加工した画像を保存する

FirebaseのCloud Storageに、加工した画像をアップロードしてみます。

Vue.js(QuasarFramework) + Firebaseのプロジェクトを作成する

このあたりを参考にしていただけますと幸いです。
https://qiita.com/yassyskywalker/items/d74ea3b0834145df5473

Vue.js(QuasarFramework)のcomponentsを作成する。

croppaタグに、たくさんプロパティの値などを設定できます！親切設計ですね！

• croppaタグに色々してい

<template lang="html">
<div>
  <croppa v-model="myCroppa"
    :width="200"
    :height="200"
    :show-remove-button="true"
    remove-button-color="black"
    :show-loading="true"
    :file-size-limit="2097152"
    accept="image/png"
    @file-type-mismatch="onFileTypeMismatch"
    @file-size-exceed="onFileSizeExceed">
  ></croppa>
  <q-btn @click="upload">アップロード</q-btn>
</div>
</template>

<script>
import {
  Loading,
  QBtn,
  Toast
} from 'quasar'
import firebase from 'firebase'

const storage = firebase.storage()
// ここでは仮にprofilePhotoというstorageを作成しています。
export const storageProfilePhotoRef = storage.ref('profilePhoto')

export default {
  name: 'uploadResizedPhoto',
  components: {
    QBtn,
    Toast
  },
  data () {
    return {
      myCroppa: {},
      dataUrl: ''
    }
  },
  methods: {
    onFileTypeMismatch (file) {
      alert('jpg, gif, png　形式でアップして下さい。')
    },
    onFileSizeExceed (file) {
      alert('ファイルは2mb以下でアップロードして下さい。')
    },
    uploadResizedPhoto () {
      const user = firebase.auth().currentUser
      // userプロパティのdispalyNameをpathとして使っています。
      const path = 'images/' + this.user.displayName + '/photo.png'
      const photoImagesRef = storageProfilePhotoRef.child(path)
      // generateBlobで、画像からblobオブジェクトを作成します。
      // blobオブジェクトをそのままputメソッドで、Cloud Storageにアップしています。
      this.myCroppa.generateBlob((blob) => {
        photoImagesRef.put(blob)
          .then((snapshot) => {
            // アップが完了したら、ダウンロードURLを取得して、
            // UserプロパティのphotoURLに書き込みます。
            const photoURL = snapshot.downloadURL
            if (user) {
              user.updateProfile({
                photoURL: photoURL
              }).then(() => {
                Toast.create.positive({
                  html: '画像を修正しました',
                  timeout: 2500
                })
                this.$store.dispatch('setUser', user)
              }).catch((error) => {
                Toast.create.negative({
                  html: 'プロフィールの更新に失敗しました:' + error,
                  timeout: 2500
                })
              })
            }
          })
          .catch((err) => {
            console.log('upload error:', err)
          })
      })
    }
  }
}
</script>

<style lang="stylus">
</style>

こんな感じで、Vueのcomponentだと、結構サックと実装できます！素晴らしい！
最終的に、QuasarFrameworkを使って以下の画像のように、SNSぽいアプリのプロフィール画像の作成で使ってみました。

まとめ

Vue-Croppaかなり手軽で使いやすいなという印象です。ドキュメントがしっかり作られているので、ほとんど詰まること無く導入できました。Vue.jsのプロジェクトにはおすすめです。