html5 图片转为base64格式异步上传

jy02409187 2016-03-16 11:34:38

加精

因为有这个需求（移动端），所以就研究了一下，发现还挺不错的。
这个主要是用了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>

...全文

9297 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

看小雪 2016-10-26

打赏
举报

继续优化呀，选择图片就立马预览。

hookee 2016-04-19

打赏
举报

龙虎逆鳞 2016-04-18

打赏
举报

base64转成图片会比较麻烦吧？

waning 2016-03-22

打赏
举报

直接绘制指定尺寸的图像到canvas再用toDataUrl方法就行了，还要注意图片的orientation属性，搞不好图片会歪的

zmzkkk 2016-03-22

打赏
举报

请问浏览器兼容如何

jy02409187 2016-03-21

打赏
举报

引用 5 楼 ipqtjmqj 的回复:

我看了半天，才发现主要是用了FileReader这个对象，可是查w3school.com.cn没有，请问楼主是哪查的资料，是w3.org还是mdn

这个我也是在网上搜索方法的时候发现的

tianfang 2016-03-21

打赏
举报

base64后长度增加了33%，对服务器带宽，服务器CPU计算需求（虽然比较低）大并发还是需要继续优化

jy02409187 2016-03-21

打赏
举报

引用 11 楼 tianfang 的回复:

[quote=引用 10 楼 jy02409187 的回复:] [quote=引用 8 楼 tianfang 的回复:] base64后长度增加了33%，对服务器带宽，服务器CPU计算需求（虽然比较低）大并发还是需要继续优化

是的，这个对于大尺寸的图片来说是会增加上传压力，但上传的时间我们一般会对图片进行压缩处理，所以我就用canvas对图片的尺寸和质量进行处理。例如，我要在手机上通过网页上传一张刚拍好的图片，一般这张图片的尺寸应该在4000左右、大小应该在4MB，但一般我们只需要图片尺寸在1920左右，最终经过处理后，base64格式的图片尺寸是1920、大小是180KB、质量是80%。[/quote] base64只是编码，把二进制转换为文本，最初为了在只支持文本传输的email协议上传输二进制附件。6位二进制编码为8位的字符，所以6字节会编码为8字节传输，就是传输量增加了1/3 图片压缩不是base64做的，web.ctx.drawImage才是压缩图片的关键 [/quote] 是的，所以我不是说了 “所以我就用canvas对图片的尺寸和质量进行处理。”

tianfang 2016-03-21