vue+element实现图片上传及裁剪功能（vue-cropper）

背景

vue-cropper是一款基于vue的优雅图片裁剪插件，可用来实现头像等功能。

效果图

安装使用

安装

npm install vue-cropper // npm 安装
yarn add vue-cropper // yarn 安装

引用

// 全局引用  main.js
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

// 局部引用
import VueCropper from 'vue-cropper'
components: { 
       VueCropper 
}, 

组件内使用

1. 上传按钮

    
    
点击上传
    
支持绝大多数图片格式，单张图片最大支持5MB

2. 设置一个弹出层，放剪裁图片的cropper

    

        

            
        
    
    

        
            更换图片
        
        清除图片
        左旋转
        右旋转
        放大
        缩小
        下载
    
    

        取 消
        确认
    

3. 剪裁框的样式

.cropper-content {
    .cropper {
        width: auto;
        height: 350px;
    }
 }

4. 方法

option是剪裁插件的属性配置，具体更多含义查看官网介绍

注：练习代码指路