文档章节

图片上传

武鹏飞
 武鹏飞
发布于 2017/04/27 17:26
字数 347
阅读 3
收藏 0

//图片拍照上传
    
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
作品 0
丰台

暂无文章

CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0
Spring的Resttemplate发送带header的post请求

private HttpHeaders getJsonHeader() { HttpHeaders headers = new HttpHeaders(); MediaType type = MediaType.parseMediaType("application/json; charset=UTF-8"); ......

qiang123
昨天
3
0
Spring Cloud Gateway 之 Only one connection receive subscriber allowed

都说Spring Cloud Gateway好,我也来试试,可是配置了总是报下面这个错误: java.lang.IllegalStateException: Only one connection receive subscriber allowed. 困扰了我几天的问题,原来...

ThinkGem
昨天
31
0
学习设计模式——观察者模式

1. 认识观察者模式 1. 定义:定义对象之间一种一对多的依赖关系,当一个对象状态发生变化时,依赖该对象的其他对象都会得到通知并进行相应的变化。 2. 组织结构: Subject:目标对象类,会被...

江左煤郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部