搜索
查看: 1912|回复: 0

图片裁剪插件cropper

[复制链接]

134

主题

213

帖子

471

积分

中级会员

中国黑客

Rank: 3Rank: 3

积分
471
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[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();
        })
回复

使用道具 举报

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

本版积分规则

温馨提示
1:发帖请遵守《中华人民共和国网络安全法》,发帖内容不得维护国家的、集体的、个人的利益。
2:请勿发布恶意攻击他人的技术文章、工具、和使用教程,发现后删帖处理。
3:本站的目的在于让更多的人了解网络安全,避免受到他人的恶意攻击。
4:本站中的部分文章,可能会出现一些“技术类手段”,但这仅仅为学习演示所用,而非恶意传播技术。
5:本站中的部分文章,可能转载自互联网。如有侵权行为,联系我们删除即可。
6:学习仅是充实头脑,切勿恶意攻击个人、企业等。所造成的法律后果一切由自己承担,本站及其站长概不负责。
我知道了
快速回复 返回顶部 返回列表