奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > 开源框架 >

Vue图片裁剪组件,vue-croppa的使用指南

时间:2018-02-07 09:30来源:未知 作者:admin
vue-croppa是一个高度可定制的图片裁剪组件 主要特点: 直观,所见即所得 高可定制 轻量:18kb (算轻量不?哈哈哈我也不知道) 支持文件拖放 (drag and drop) 支持移动端手势 使用步骤:

vue-croppa是一个高度可定制的图片裁剪组件

主要特点:

  1. 直观,所见即所得
  2. 高可定制
  3. 轻量:18kb (算轻量不?哈哈哈我也不知道)
  4. 支持文件拖放 (drag and drop)
  5. 支持移动端手势

 

使用步骤:

1. 使用 npm  安装或者 在html中直接引入.

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

 

2.引入样式文件

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

 

3. 注册插件

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

 Vue.use(Croppa)       
or


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

4. html和js简单示例:

<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
     }
   }
 })       

赶紧上传一张图片6一6吧!

官方文档:https://zhanziyang.github.io/vue-croppa/#/
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-04-02 21:04