Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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ぽいアプリのプロフィール画像の作成で使ってみました。

gifhonban.gif

まとめ

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

mules
不動産業界2000店舗超の利用実績のあるMadoryサービスの開発・運用等、主に不動産業界向けアプリ・ソフトウェア開発運用などから社内サークルでの電子工作やxR技術まで、色々な技術チャレンジをしているチームです。電気通信事業届出番号 : A-01-17309
https://twitter.com/MulesTeamInfo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした