博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js实现对上传图片的路径转成base64编码,并且对图片进行压缩,实现预览功能...
阅读量:7236 次
发布时间:2019-06-29

本文共 2446 字,大约阅读时间需要 8 分钟。

function startUpload(fileId,site){    var this_=$(fileId);    var front;    if(site=='back' || site=='head'){        front=$('#front').val();        if(front.length==0){            layer.msg('请先上传身份证正面照');            return;        }    }    readAsDataURL( fileId,function(img){        this_.prev().attr({src : img});        this_.show();        this_.next().val(img);        });}/** * 读取图片为base64数据 返回 base64图片 * @param file 文件 * @param callback 回调函数 */function readAsDataURL(fileId,callback){    var file = $(fileId).get(0).files[0];    var reader = new FileReader();    var image = new Image();    var canvas = createCanvas();    var ctx = canvas.getContext("2d");    reader.onload = function(){ // 文件加载完处理        var result = this.result;        image.onload = function(){ // 图片加载完处理            var imgScale = imgScaleW(800,this.width,this.height);            canvas.width = imgScale.width;            canvas.height = imgScale.height;            ctx.drawImage(image,0,0,imgScale.width,imgScale.height);            var dataURL = canvas.toDataURL('image/jpeg'); // 图片base64            ctx.clearRect(0,0,imgScale.width,imgScale.height); // 清除画布            callback (dataURL); //dataURL:处理成功返回的图片base64        };        image.src = result;    };    reader.readAsDataURL(file);}/** *  创建画布 * @returns */function createCanvas(){    var canvas = document.getElementById('canvas');    if(!canvas){        var canvasTag = document.createElement('canvas');        canvasTag.setAttribute('id','canvas');        canvasTag.setAttribute('style','display:none;');//隐藏画布        document.body.appendChild(canvasTag);        canvas = document.getElementById('canvas');    }    return canvas;}/** * 图片压缩 * @param maxWidth 最大宽度或最大高度 * @param width 宽度 * @param height 高度 * @returns {___anonymous1968_1969} */function imgScaleW(maxWidth,width,height){    var imgScale = {};    var w = 0;    var h = 0;    if(width <= maxWidth && height <= maxWidth){ // 如果图片宽高都小于限制的最大值,不用缩放        imgScale = {                width:width,                height:height        };    }else{        if(width >= height){ // 如果图片宽大于高            w = maxWidth;            h = Math.ceil(maxWidth * height / width);        }else{     // 如果图片高大于宽            h = maxWidth;            w = Math.ceil(maxWidth * width / height);        }        imgScale = {                width:w,                height:h        };    }    return imgScale;}

 

转载于:https://www.cnblogs.com/zhaoyan001/p/10983219.html

你可能感兴趣的文章
从零开始写简易读写分离,不难嘛!
查看>>
CoreOS实践指南(十):在CoreOS上的应用服务实践(下)
查看>>
CentOS 配置第三方epo源
查看>>
老李分享:持续集成学好jenkins 2
查看>>
笔试三 15
查看>>
php 面向对象之解析
查看>>
linux 添加用户
查看>>
【安全牛学习笔记】常用工具-NETCAT
查看>>
使用精简版jdk9在docker上运行springboot2
查看>>
MySQL 5.7.18 Source Code Installation
查看>>
Java中的可变参数
查看>>
JSP中的contextPath的获取与设置
查看>>
Java代理(静态/动态 JDK,cglib)
查看>>
shell编程进阶
查看>>
12.15-Linux目录结构
查看>>
运维自动化、虚拟化
查看>>
关于 UIImageView的旋转
查看>>
用户的相关命令
查看>>
Linux 20180412 隐藏权限lsattr_chattr等
查看>>
JavaScript 引入页面
查看>>