图片裁剪插件cropper

1.首先引入插件的js和css文件

            <script src="http://h5.dashenw.cn/2017/iphoneback/jquery-2.1.0.js"></script>
            <script src="http://h5.dashenw.cn/2017/iphoneback/cropper-js.min.js" type="text/javascript" charset="utf-8"></script>
            <link rel="stylesheet" type="text/css" href="http://h5.dashenw.cn/2017/iphoneback/cropper.min.css"/>

2.设置css样式

<style type="text/css">
  html,body{width: 100%;height: 100%;}
  *{padding: 0;margin: 0;}
  .box{width: 100%;height: auto;position: relative;}
  .myfile{width: 75%;height: 320px;display: block;position: absolute;left: 12.5%;
  outline: none;opacity: 0;}
  .myimg{width: 75%;height: auto;margin: 0 auto;display: block;}
  #cont{width: 100%;height: 100%;position: fixed;z-index: 100;left: 0;top: 0;display: none;}
  .btn{width: 50%;height: 50px;line-height: 50px;font-size: 30px;text-align: center;color: #FFFFFF;bottom: 0;outline: none;border: 0;z-index: 200;position: absolute;}     
  .btn_yes{left:0;background: #3ec23e;}
  .btn_no{right: 0;}
</style>

3.html代码

    <div class="box">
                  <input class="myfile" type="file" />
                  <img class="myimg" src="http://localhost:8020/%23jackLiu/18-02-05%E5%B9%B4%E5%A4%9C%E9%A5%AD/img/ind8_btn.jpg"/>
            </div>
            <div id="cont">
                  <img id="myimg" src=""/>
                  <button class="btn btn_yes">确定</button>
                  <button class="btn btn_no">取消</button>
            </div>

4.js代码

var cropper;//声明一个未定义的cropper变量
            //用户选择图片事件
        $(".myfile").on("change",function(){                             
            var file=this.files[0]; //获取file对象
            var type = file.type.split("/"); //检查文件类型
            if(type[0] != "image"){
                alert("请选择图片");
                return false;
            }
            var reader = new FileReader();//新建fileReader对象
            reader.readAsDataURL(file);  
            reader.onloadend = function(){ //图片加载事件
                var dataUrl = reader.result; 
                $("#myimg").attr("src",dataUrl);
                $("#cont").show();
                if(cropper){//如果cropper变量已被赋值，则改变cropper对象的图片路径。
                    cropper.replace(dataUrl);
                }else{
                  //生成裁剪框
                    cropperStart()
                }
                   
                   
            }                         
        })
        function cropperStart(){             
                  /* 此插件会根据传入的img标签，在此标签的父元素内生成一个canvas画布用来剪裁图片，
                   * 所以img标签一定要有一个可供cropper使用的父元素。
                   */
            cropper = new Cropper(document.getElementById("myimg"),{
                        //裁剪比例
                        aspectRatio: 4 / 3, 
                        viewMode:2,    //裁剪框不能超过图片
                        movable:false, //禁用拖动图片
                        scalable:false,//禁用缩放图片
                        zoomOnWheel:false, //禁用鼠标缩放图片
                        minCropBoxWidth:200, //裁剪框最小宽度
                        minCropBoxHeight:150,//裁剪框最小高度
                  })
           
           
        }
        //点击确定时，将默认图片更改为裁剪后的图片
        $(".btn_yes").on("click",function(){
            var dataUrl = cropper.getCroppedCanvas(); //如果需要保存图片，请将dataUrl使用POST发送到后台，PHP会将其转换为图片并保存。
            console.log(dataUrl)
            var imgUrl = dataUrl.toDataURL("image/png");
            $("#cont").hide(); //裁剪框隐藏
            $(".myimg").attr("src",imgUrl);
            cropper.reset()
        })
        //点击 取消隐藏裁剪框
        $(".btn_no").on("click",function(){
            $("#cont").hide();
            cropper.reset();
        })