用javascript实现用户头像上传并压缩demo

无聊写的一个用户头像上传的demo

原理：

把用户头像img标签和input选择文件标签重叠(大小相等，位置相同)，通过设置input inzex的值把input覆盖在图片的上面并且透明度设置为0，即隐藏input;
调用h5的fileReader接口拿到图片的base64地址
用canvas实现图片压缩
上传接口函数uploadImg为模拟的，根据自己项目自定义

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/>
    <title>头像上传</title>
    <style>
        #header_box{width: 80px;height: 80px;border:1px solid #fff;border-radius: 100%;position: relative;}
        #header_box img,input{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 100%;}
        input:hover,img:hover{cursor: pointer;}
        input{opacity: 0;z-index: 100;}
        img{background-color: #ececec;}
    </style>
</head>
<body>
 <div id="header_box">
     <img src="#" alt="" id="user"/>
     <input type="file" id="file"/>
 </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $("#file").on("change",function(e){
        var file= e.target.files[0];
        var maxSize=2048;//设置图片上传最大值为2M
        var name=file.name;
        var size=(file.size/1024).toFixed(2);
        var type=file.type;
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload=function(e){
            var result= e.target.result;
            var image = new Image();
            image.src = result;
            image.onload = function(){
                if(size>maxSize){ //判断图像大小，大于2M则压缩后上传 ，小于2M直接上传无需压缩
                   var img64 = compress(image, 100, 100, 0.7);
                     //$("#user").attr("src",img64); //实现图片预览功能
                    //调用后台上传接口 ，把img64当参数传给接口，接口调用成功则返回头像上传成功后的服务器的访问地址，把接口返回的图片地址赋值给页面上img的src即可
                    uploadImg(img64);
                }else{
                    //$("#user").attr("src",result); //实现图片预览功能
                    //调用后台上传接口 ，把result当参数传给接口，接口调用成功则返回头像上传成功后的服务器的访问地址，把接口返回的图片地址赋值给页面上img的src即可
                }
            }
        };
    });

    /**canvas图片压缩函数
     * @params
     * img:需要压缩的图片对象
     * width:压缩后的宽度
     * height:压缩后的高
     * ratio:图片压缩质量(0-1);
     * */
    function compress(img, width, height, ratio){
        var canvas, ctx, img64;
        canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        img64 = canvas.toDataURL("image/jpeg", ratio);
        return img64;
    }


   /**定义模拟图片上传接口函数
    * @params
    * img:传递给接口的图片的file类型的字符串
    * */
    function uploadImg(img){
      var params={imgPath:img};
        $.ajax({
            url:"********",
            data:params,
            type:"post",
            success:function(data){
                if(data.code==1){ //成功
                    var imgPath=data.imgPath;//假设接口返回的地址为imgPath
                   $("#img").attr("src",imgPath);
                }
            }
        })
    }
</script>
</html>

用javascript实现用户头像上传并压缩demo

猜你喜欢