Posted at

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


まとめ

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