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

最新推荐文章于 2024-04-29 14:28:17 发布

1091214370的博客

最新推荐文章于 2024-04-29 14:28:17 发布

阅读量2.2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34149935/article/details/77336523

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

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

1091214370的博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
头像上传剪裁预览功能js实现，以及Safari中一个坑。

先贴张图片，看看效果贴代码之前，将一下<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title> 上传头像 </title> <link href="css/re-boot.css" rel=
复制链接

扫一扫

专栏目录