cropperjs实现裁剪图片功能

本文实例为大家分享了cropperjs实现裁剪图片功能的具体代码，供大家参考，具体内容如下

cropperjs (裁剪图片)

vue版本

// 下载
// 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;
            }
        });
    }

jq版本

选择图片

     



    

    

       

          
             选择图片
          
       
×
       
           

              

                  
              
              

                 
图片预览：
                 

                 
              
           
           

               复位
               旋转
               换向 
           
      确定
   

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。