当前位置:首页 > 前端 > Vue.js

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

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


第一种:

1.npm安装vue-crpopper

npm install --save vue-croppa

2.引入css文件
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>
2.引入css文件
<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演示(点击下面的图片):



读后有收获可以支付宝请作者喝咖啡
< 上一篇 下一篇 >
文章评论
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部