基于vue的图片裁剪vue-cropper

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

需求：上传图片之前，按照一定比例进行剪裁，剪裁后上传到服务器

image.png

安装

npm install vue-cropper

使用

main.js里面

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

组件内

• 1、上传按钮

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

image.png

使用element-ui的上传按钮，要配置:auto-upload="false"（不要自动上传）， :on-change='changeUpload'（选择完图片后的方法），一会儿再交代changeUpload方法

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

 
    
      

        

        
        
      
      

        取 消
        确认
      
    

• 3、剪裁框的样式

// 截图
.cropper-content {
    .cropper {
        width: auto;
        height: 300px;
    }
}

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