使用方法:

1、head引入css文件

<link rel="stylesheet" href="css/cropper.css" />


2、head引入js文件

<script src="js/jquery.js"></script>
<script src="js/cropper.js"></script>

3、body引入部分

<button id="guyuan" style="margin:50px;">裁剪图片</button>
<script> 
    var img = 'img/tp.png'
    $('#guyuan').click(function () {
        Model_Cropper({
            imgUrl: img, // 图片地址 / 或者 base64   注:图片地址(需要在服务器环境下  base64不需要)    
            proportion: [100, 100], // 宽/高  裁剪and压缩比例  单位px  图片等比例压缩至 200px/200px
            confirm: function (result) {   // 裁剪成功后  返回的 事件  
                // 调用 result.close() 关闭弹框   
                // result.data  为对象  base64 = 处理后base64码  blob = 图片对象 
                console.log(result)
                console.log('blob对象=======',result.data.blob)
                console.log('base64=======',result.data.base64)
                alert('打开控制台查看 裁剪压缩返回数据')
            },
        })
    }) 
    // 
    $(function(){
        $('#guyuan').click()
    })
</script>