文档章节

图片上传

武鹏飞
 武鹏飞
发布于 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
丰台

暂无文章

49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

王鑫linux
今天
1
0
Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
0
0
spring EL 和资源调用

资源调用 import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.PropertySource;import org.springframework.core.io.Resource;......

Canaan_
今天
1
0
memcached命令行、memcached数据导出和导入

一、memcached命令行 yum装telnet yum install telent 进入memcached telnet 127.0.0.1 11211 命令最后的2表示,两位字节,30表示过期时间(秒) 查看key1 get key1 删除:ctrl+删除键 二、m...

Zhouliang6
今天
1
0
Linux定时备份MySQL数据库

做项目有时候要备份数据库,手动备份太麻烦,所以找了一下定时备份数据库的方法 Linux里有一个 crontab 命令被用来提交和管理用户的需要周期性执行的任务,就像Windows里的定时任务一样,用这...

月夜中徘徊
今天
1
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部