图片上传
图片上传
武鹏飞 发表于8个月前
图片上传
  • 发表于 8个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

//图片拍照上传
    
var result1 = '',result2 = '',result3 = '',result4 = '' ,result5 = '',result6 = '' ;

    $('#img')[0].addEventListener('change', function () {
        
        //$('overlay').style.display = 'flex';

        var reader = new FileReader();

        reader.onload = function (e) {
            var compressImg = compress( this.result,fileSize);
        };

        reader.readAsDataURL(this.files[0]);

        result1 = this.files[0].size + ' Bytes';

        var fileSize = Math.round(this.files[0].size/1024/1024) ;
    }, false);

    var compress = function (res,fileSize) {
        var img = new Image(),
            maxW = 200; //设置最大宽度

        img.onload = function () {
            var cvs = document.createElement( 'canvas'),
                ctx = cvs.getContext( '2d');

            result2 = img.width;
            result3 = img.height;

            if(img.width > maxW) {
                img.height *= maxW / img.width;
                img.width = maxW;
            }

            cvs.width = img.width;
            cvs.height = img.height;

            result4 = cvs.width;
            result5 = cvs.height;

            ctx.clearRect(0, 0, cvs.width, cvs.height);
            ctx.drawImage(img, 0, 0, img.width, img.height);

            var compressRate = getCompressRate(1,fileSize);

            var dataUrl = cvs.toDataURL( 'image/jpeg', compressRate);

            $('#imgInfo')[0].setAttribute('src',dataUrl);
             localStorage.setItem("photo_head",dataUrl)
             //$('overlay').style.display = 'none';

//          $('showResult').innerHTML = "<p>压缩前图片大小为:"+result1+"<br/><p>压缩前图片宽度为:"+result2+"<br/><p>压缩前图片高度为:"+result3+"<br/><p>压缩后图片宽度为:"+result4+"<br/><p>压缩后图片高度为:"+result5+"</p><p class='small'>压缩后的图片大小,可通过nodejs或者后台获取!</p>" ;
     };

        img.src = res;
    };

    function getCompressRate(allowMaxSize,fileSize){ //计算压缩比率,size单位为MB
        var compressRate = 1;
        if(fileSize/allowMaxSize > 4){
           compressRate = 0.5;
        } else if(fileSize/allowMaxSize >3){
           compressRate = 0.6;
        } else if(fileSize/allowMaxSize >2){
           compressRate = 0.7;
        } else if(fileSize > allowMaxSize){
           compressRate = 0.8;
        } else{
           compressRate = 0.9;
        }

        result6 = compressRate;

        return compressRate;
    }
    
//上传头像接口
$("#head_image").on("click",function(){
      
    
        var photo=localStorage.getItem("photo_head");
        console.log(photo);
        var photo1=photo.substring(photo.indexOf(";")+1);
       // console.log(photo1)
    $.ajax({
        type: "post",
        url: "/user/updateUserPhotoById.do",
        data:{photo:photo1},
        beforeSend: function() {
            //$("#toast1").show().html("正在加载全部订单");
            //console.log("ok");
        },
        success: function(data) {
            var result = JSON.parse(data);
            //console.log(result);
            //console.log(result.photoname);
            console.log(result.path);
            localStorage.setItem("URL",result.path.substring(0,result.path.indexOf("to")+3))
            //console.log(result.path.substring(0,result.path.indexOf("to")+3));
        //图片名称    console.log(result.photoname)
        //localStorage.setItem("img",result.photoname)
        }
        
    })    
})

共有 人打赏支持
粉丝 0
博文 2
码字总数 476
×
武鹏飞
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: