搜索
查看: 2149|回复: 0

图片裁剪插件cropper

[复制链接]

150

主题

245

帖子

532

积分

高级会员

中国黑客

Rank: 4

积分
532
QQ
发表于 2018-7-12 20:20:32 来自手机 | 显示全部楼层 |阅读模式
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[zxsq-anti-bbcode-0]; //获取file对象
            var type = file.type.split("/"); //检查文件类型
            if(type[zxsq-anti-bbcode-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();
        })
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表