Vue.js+webpackでCropperを使う方法

Ⅰ. はじめに

タイトルの通り「Vue.js+webpackでCropperを使う方法」です。
Cropperは画像のトリミング用のjQueryプラグインですが、有志によりVue.js でも簡単に利用できるようにするパッケージが作成されています。

Cropperの公式デモサイト
https://fengyuanchen.github.io/cropper/

Ⅱ. やり方

1. vue-cropperをインストールする

npm install vue-cropper

2. サンプルプログラムを書く

ImageCropPage.vue

<template>
  <div>
    <vueCropper
      ref="cropper"
      :img="option.img"
      :outputSize="option.size"
      :outputType="option.outputType"
      :fixed="option.fixed"
      :fixedNumber="option.fixedNumber"
      style="height: 500px"
    ></vueCropper>
    <input type="file" id="image" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data () {
    return {
      option: {
        img: null,
        size: 1,
        full: false,
        outputType: 'jpg',
        canMove: true,
        fixedBox: false,
        original: false,
        canMoveBox: true,
        fixed: true, // 比率固定を有効にする
        fixedNumber: [1, 1] // 1:1 の比率
      }
    }
  },
  mounted: function () {
    this.startCrop()
  },
  methods: {
    startCrop () {
      this.$refs.cropper.startCrop()
    },
    uploadImg (e) {
      let file = e.target.files[0]
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('対応していない画像ファイルです')
        return false
      }

      let reader = new FileReader()
      reader.onload = (e) => {
        if (typeof e.target.result === 'object') {
          this.option.img = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          this.option.img = e.target.result
        }
      }
      reader.readAsArrayBuffer(file)
    }
  }
}
</script>

実行結果

参考

https://github.com/xyxiao001/vue-cropper