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

傷城~ 2022-06-10 11:16 225阅读 0赞

先贴张图片，看看效果![效果图][SouthEast]

贴代码之前，先说一下坑吧。  
场景：点击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 ;
    }

[SouthEast]: /images/20220610/ac705184e3414437aa4566eb3abd45db.png