cropperjs实现裁剪图片功能_javascript技巧

// 下载
// npm install cropperjs -save

// 使用
//1.0 引入 
import Cropper from 'cropperjs'

// 2.0初始化裁剪框
    data(){
        return{
            croppable: false // 控制上传后的显隐
        }
    },
    
    methods:{
        var _this= this;
        var image = document.getElementById('image');
        this.cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 1,
            background:false,
            zoomable:false,
            ready: function () {
              _this.croppable = true;
            }
        });
    }

选择图片

     



    

    

       

          
             选择图片
          
       
×
       
           

              

                  
              
              

                 
图片预览：
                 

                 
              
           
           

               复位
               旋转
               换向 
           
      确定