头像上传剪裁预览功能js实现，以及Safari中一个坑。

来源：互联网发布：义隆单片机em 编辑：程序博客网时间：2024/05/18 02:55

先贴张图片，看看效果效果图

贴代码之前，先说一下坑吧。
场景：点击button，隐藏的触发，选择需要上传的文件，但是在Safari下面，无法完成。

解决方案：之前input是display：none，为达到同样目的且不影响使用，设置为opacity：0；问题就解决了。

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">            <title>                上传头像            </title>            <link href="css/re-boot.css" rel="stylesheet" type="text/css"/>            <link href="css/clear.css" rel="stylesheet" type="text/css"/>            <link href="css/uploadTx.css" rel="stylesheet" type="text/css">                <script src="js/jquery1.10.js">                </script>                <script src="layer/layui.js">                </script>                <script src="js/html2canvas.js" type="text/javascript">                </script>            </link>        </meta>    </head>    <body>        <div id="uploadTx">            <div class="uploadBox">                <div class="screenshot">                    <div class="uploadImg">                        <button class="uploadBtn" type="button" for="postFile">                            选择图片                        </button>                        <input id="postFile" type="file"/>                        <div class="shadeDiv">                        </div>                    </div>                </div>                <div class="btnList">                    <button class="seeTx">预览</button>                    <button class="subtractSize" type="button">                        -                    </button>                    <button class="addSize" type="button">                        +                    </button>                    <button class="reUpload" type="button">                        重新上传                    </button>                </div>                <p>                    (请保证上传图片大小在2M以内)                </p>            </div>            <div class="disTx">                <p>                    预览                </p>                <img class="bigTx" src="images/photo-100.png">                    <p>                        100px * 100px                    </p>                    <img class="mediumTx" src="images/photo-86.png">                        <p>                            86px * 86px                        </p>                        <img class="smallTx" src="images/photo-60.png">                            <p>                                60px * 60px                            </p>                            <button type="button">                                保存头像                            </button>                        </img>                    </img>                </img>            </div>        </div>        <button class="tc" type="button">            上传图片弹窗        </button>        <script>            // 弹窗    layui.use('layer', function(){        var layer = layui.layer;        // 上传图片        $('.tc').click(function(){            layer.open({                type: 1,                 title:['请选择图片','font-size:20px;color:#fff;'],                area:['700px','550px'],                content: $('#uploadTx') //这里content是一个普通的String            });        });    var w,h;    var flag=false;    // 上传图片按钮    $('.uploadBtn').click(function(){        $('#postFile').click();        flag=true;    });    // 重新上传    $('.reUpload').click(function(){        $('#postFile').click();    });    // 截取头像方法    function screenshot() {          html2canvas($('.screenshot'), {          allowTaint: true,          taintTest: false,          onrendered: function(canvas) {              canvas.id = "mycanvas";              var dataUrl = canvas.toDataURL();              $('.bigTx').attr('src',dataUrl);              $('.mediumTx').attr('src',dataUrl);            $('.smallTx').attr('src',dataUrl);          }        });    }    // input内容改变    $('#postFile').change(function() {        // 初始化图像大小        $('.uploadImg').css('background-size','auto');        var val = this.value;        var upLoadType = '.jpg,.gif,.bmp,.png';//['.jpg','.gif','.bmp','.png']; //可上传的格式        var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase(); //从字符串中抽出最后一次出现.之后的字符，并且转换成小写        var result = upLoadType.indexOf(fileExt); //查找后缀名是否符合条件，如果符合返回>=0，如果不符合则返回负数;        var oFReader = new FileReader();        if (this.files.length === 0) { return; }        var oFile = this.files[0]; //如果只有一个文件则只需要访问这个FileList对象中的第一个元素.        if (result < 0) {            layer.msg('您上传的格式有误！');            return;        } else{                $('.uploadBtn').hide();                $('.shadeDiv').show();                $('.btnList').show();        };        oFReader.readAsDataURL(oFile); // 开始在后台进行读取操作。当图像文件的所有内容加载后,他们转换成一个data:URL,传递到onload回调函数中        oFReader.onload = function (oFREvent) {         //当读取操作成功完成时调用.            var image=new Image();            image.src=oFREvent.target.result;            image.onload=function(){                w=image.width;                h=image.height;            }            $('.uploadImg').css('background-image','url('+oFREvent.target.result+')');            };        screenshot();    });    // 鼠标滚动改变图片大小    // $('.uploadImg').on("mousewheel DOMMouseScroll", function(e) {    //  if(flag){    //      var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie    //                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox    //            $(document).off("mousewheel DOMMouseScroll");    //            if (delta > 0) {    //                // 向上滚    //                $('.addSize').click();    //            } else if (delta < 0) {    //                // 向下滚    //                $('.subtractSize').click();    //            }    //  }    //        });    // 点击按钮调节图片大小    // 变大    $('.addSize').click(function(){        w*=1.1;        h*=1.1;        $('.uploadImg').css('background-size',w+'px '+h+'px');        screenshot();    });    // 变小    $('.subtractSize').click(function(){        w*=0.9;        h*=0.9;        $('.uploadImg').css('background-size',w+'px '+h+'px');        screenshot();    });    //预览    $('.seeTx').click(screenshot);    // // 拖动    // var mx,my,//鼠标初始坐标    //  ex,ey,//鼠标最终坐标    //  px,py;//原有的position坐标    // $('.uploadImg').mousedown(function(e){    //  // 图片显示后有效    //  if(flag){    //      var offset=$(this).offset();    //      mx=e.pageX-offset.left;    //      my=e.pagey-offset.top;    //  }    // });    // $('.uploadImg').mousemove(function(e){    //  // 图片显示后有效    //  if(flag){    //      var offset=$(this).offset();    //      ex=e.pageX-offset.left;    //      ey=e.pagey-offset.top;    //      $('.uploadImg').css('background-size',x+'px '+y+'px');    //  }    // });    // $('.uploadImg').mouseup(function(e){    //  // 图片显示后有效    //  if(flag){    //      var offset=$(this).offset();    //      ex=e.pageX-offset.left;    //      ey=e.pagey-offset.top;    //      $('.uploadImg').css('background-size',x+'px '+y+'px');    //  }    // });});    </script>    </body></html>

样式贴这（scss文件）

@charset'utf-8';.layui-layer-title {    background-color: #06cc9b!important;}#uploadTx {    width: 700px;    height: auto;    padding: 40px 40px 23px 40px;    overflow: hidden;    display: none;    position: relative;}.uploadBox {    float: left;    p {        font-size: 16px;        line-height: 20px;        text-align: center;        margin-top: 20px;        color: #fdad00;   }}.disTx {    margin-left: 80px;    float: left;    p {        font-size: 14px;        line-height: 16px;        color: #888;        margin-top: 5px;        margin-bottom: 10px;        text-align: center;   }   img {       display: block;       margin: 0 auto;       border-radius: 50%;  }  .bigTx {      width: 100px;      height: 100px; } .mediumTx {     width: 86px;     height: 86px;}.smallTx {    width: 60px;    height: 60px;}button {    width: 120px;    height: 40px;    font-size: 18px;    color: #fff;    line-height: 40px;    margin: 10px auto;    background-color: #06cc9b;    cursor: pointer;    outline: 0;}}.uploadImg {    width: 350px;    height: 350px;    background-color: #f2f2f2;    text-align: center;    vertical-align: middle;    position: absolute;    background-repeat: no-repeat;    background-position: center;    overflow: hidden;    margin: -75px;    cursor: move;    input {        opacity: 0;        display: block;   }   button {       width: 100px;       height: 30px;       background-color: #fff;       background-image: url('../images/photo-add.png');       background-repeat: no-repeat;       background-position: 3px 8px;       display: inline-block;       font-size: 16px;       line-height: 30px;       padding-left: 20px;       color: #000;       border: 0;       outline: 0;       margin-top: 160px;       cursor: pointer;       z-index: 99;  }  .shadeDiv {      width: 200px;      height: 200px;      top: 50%;      left: 50%;      margin-top: -124px;      margin-left: -100px;      position: relative;      border-radius:50%;      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);      display: none; }}.btnList {    height: auto;    overflow: hidden;    margin-top: 80px;    display: none;    button {        min-width: 30px;        font-size: 18px;        color: #fff;        line-height: 20px;        margin-right: 10px;        padding: 5px;        background-color: #fdad00;        border: 0;        outline: 0;        cursor: pointer;        display: inline-block;        float: right;   }}.screenshot{    width:200px;    height: 200px;    border-radius: 50%;    position: relative;    margin:75px ;}

阅读全文

1 0