图片裁剪插件cropper

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

附上插件下载地址https://github.com/fengyuanchen/cropperjs

2.设置css样式

3.html代码

    

                  
                  
            
            

                  
                  确定
                  取消
            

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();
                $(".myfile").val("")//重置file按钮清空图片
                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(); 
            var imgUrl = dataUrl.toDataURL("image/png",1);//如果需要保存图片，请将imgUrl使用POST发送到后台，PHP会将其转换为图片并保存。
            $("#cont").hide(); //裁剪框隐藏
            $(".myimg").attr("src",imgUrl);
            cropper.reset();//重置图片内容
        })
        //点击 取消隐藏裁剪框
        $(".btn_no").on("click",function(){
            $("#cont").hide();
            cropper.reset();//重置图片内容
        })