html5 图片转为base64格式异步上传
Posted 兌_onlyone
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5 图片转为base64格式异步上传相关的知识，希望对你有一定的参考价值。
因为有这个需求（移动端），所以就研究了一下，发现还挺不错的。
这个主要是用了html5的API，不需要其他的JS插件，不过只有支持html5的浏览器才行，就现在而言应该大部份都支持的。
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <head> <title></title> </head> <body> <img id="expImg"/> <img id="img" style="display:none"/> <div><input type="file" id="file"></div> <div id="btn" style="font-size:48px; line-height:60px">确定</div> </body> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ web.main(); }); var web={ main : function(){ web.init(); web.getImgUrl(); }, init : function(){ this.file_Id=$("#file"); this.img_Id=$("#img"); this.expImg_Id=$("#expImg"); this.btn_Id=$("#btn"); this.c=document.createElement("canvas"); this.ctx=this.c.getContext("2d"); }, getImgUrl : function(){ var fileUrl="",imgDataUrl="",reader=new FileReader(),imgW=0,imgH=0,expW=0,expH=0,imgMax=800; web.btn_Id.click(function(){ imgW=0; imgH=0; expW=0; expH=0; web.img_Id[0].src=""; //转换图片为base64格式 fileUrl=web.file_Id[0].files[0]; reader.readAsDataURL(fileUrl); reader.onload=function(e){ web.img_Id[0].src=this.result; imgW=web.img_Id.width(); imgH=web.img_Id.height(); //改变图片尺寸，这个根据自己的实际需求来写算法 if(imgW>imgMax&&imgW>=imgH){ expW=imgMax; expH=parseInt((imgMax*imgH)/imgW); }else if(imgH>imgMax&&imgH>imgW){ expH=imgMax; expW=parseInt((imgMax*imgW)/imgH); }else{ expW=imgW; expH=imgH; } web.c.width=expW; web.c.height=expH; web.ctx.drawImage(web.img_Id[0],0,0,expW,expH); imgDataUrl=web.c.toDataURL(); //默认输出PNG格式 //imgDataUrl=web.c.toDataURL("image/jpeg",0.8); //设置输出jpg格式，第二个参数为图片质量 web.expImg_Id[0].src=imgDataUrl; } }) } } </script> </html>
以上是关于html5 图片转为base64格式异步上传的主要内容，如果未能解决你的问题，请参考以下文章
JavaWeb项目 js图片上传到Oracle转为base64存入数据库