文档章节

图片上传

武鹏飞
 武鹏飞
发布于 2017/04/27 17:26
字数 347
阅读 4
收藏 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)
        }
        
    })    
})

© 著作权归作者所有

共有 人打赏支持
上一篇: Echarts
下一篇: Echarts
武鹏飞
粉丝 0
博文 2
码字总数 476
作品 0
丰台
私信 提问

暂无文章

KaliLinux常用服务配置教程DHCP服务工作流程

KaliLinux常用服务配置教程DHCP服务工作流程 DHCP服务工作流程如图1.1所示。 具体的工作流程如下所示: (1)DHCP客户端以广播的方式发出DHCP Discover报文。 (2)所有的DHCP服务器(DHCP ...

大学霸
5分钟前
0
0
Spring Junit单元测试配置

<dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>5.1.2.RELEASE</version></dependency><dependency> <group......

TonyTaotao
10分钟前
0
0
线程安全与非线程安全-个人理解

类的某个方法是线程安全的, 说明这个方法在并发执行中,从开始执行到执行完毕,都是同步的, 比如:之前做的并发数据导出,并发的查询数据库, 但是在写入excel的时候,需要做一个同步,因为...

Java搬砖工程师
12分钟前
0
0
如何提升JavaScript的任务效率?学会后教给你同事

本文由云+社区发表 一、概述 JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增...

腾讯云加社区
12分钟前
0
0
Hadoop运行在Kubernetes平台实践

Hadoop与Kubernetes就好像江湖里的两大绝世高手,一个是成名已久的长者,至今仍然名声远扬,一个则是初出茅庐的青涩少年,骨骼惊奇,不走寻常路,一出手便惊诧了整个武林。Hadoop与Kubernete...

微笑向暖wx
13分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部