Vue-cli图片裁剪插件 vue-crpopper

接触Vue的时间不算太长，偶然在Vue项目中需要用到图片裁剪的功能，网上找到了一个还算不错的vue插件，分享下：

第一种：

1.npm安装vue-crpopper

npm install --save vue-croppa

import 'vue-croppa/dist/vue-croppa.css'

3.use到Vue上

import Vue from 'vue'
import Croppa from 'vue-croppa'

Vue.use(Croppa)

第二种：

1.标签直接引入vue-crpopper

<script src="https://unpkg.com/vue-croppa/dist/vue-croppa.min.js"></script>

<link href="https://unpkg.com/vue-croppa/dist/vue-croppa.min.css" rel="stylesheet" type="text/css">

3.同样需要use到Vue

<script> Vue.use(Croppa) </script>

调用vue-crpopper（不管怎么安装的，使用方法相同）：

<croppa v-model="myCroppa"></croppa>

new Vue({
   // ... other vm options omitted
   data: {
     myCroppa: {}
   },

   methods: {
     uploadCroppedImage() {
       this.myCroppa.generateBlob((blob) => {
         // write code to upload the cropped image file (a file is a blob)
       }, 'image/jpeg', 0.8) // 80% compressed jpeg file
     }
   }
 })    

官方Demo演示（点击下面的图片）：