因为有这个需求（移动端），所以就研究了一下，发现还挺不错的。
这个主要是用了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格式异步上传的更多相关文章

  1. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  2. 图片base64格式转为file文件类型上传方法

    日常使用文件上传方式,都是通过input type='file'的文件选择框进行文件上传.但是会通过其他交互方式等到图片的base64格式进行上传.具体情况如下示意: 在项目开发中,需要进行照片采集, ...

  3. 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  4. PHP将图片转base64格式函数

    base64的好处是什么?今天在跟小伙伴讨论这个问题,要是全站用Php把图片转为base64行不行? 1. 提升性能: 网页上的每一个图片,都是需要消耗一个 http 请求下载而来的, 图片的下载始终 ...

  5. 使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

  6. 使用html5 FileReader获取图片，并异步上传到server(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...

  7. 使用 html5 FileReader 获取图片, 并异步上传到服务器 (不使用 iframe)

    为什么80%的码农都做不了架构师?>>>   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码post到服务器. 3.根据 ...

  8. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

  9. HTML5实现图片文件异步上传

    原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...

随机推荐

  1. segmentfault.com mongo出识以及对数组的操作

    https://segmentfault.com/a/1190000003951602 首先推荐个工具,no-sql-manager-for-mongodb-professional,虽然收费,但是每 ...

  2. SQL Server 2012 学习笔记4

    1.  约束 , 给某些字段添加约束条件, 比如年龄在1-100岁之间 添加约束,输入 Age>1 and Age < 100 2.  存储过程 存储过程也可以做增删改查    存储过程的 ...

  3. Java代码块

    代码块分为普通代码块.构造块.静态代码块.同步代码块4种 普通代码块 普通代码块是指直接在方法或者是语句中定义的代码块 构造块 构造块是直接写在类中的代码块 构造块优先于构造方法执行,而且每次实例化对 ...

  4. Marshal

    https://msdn.microsoft.com/en-us/library/aa288468(v=vs.71).aspx http://tomosoft.jp/design/?p=4647 ht ...

  5. Unity3D Sprite Draw Call合批规则

    只要材质相同,并Sprite在同一Atlas里,就可以合批. 不论Sorting Layer不同,还是Sorting Order不同. 材质相同的两个不同Sorting Order之间插入一个不同材质 ...

  6. super的作用（转自百度）

    super出现在继承了父类的子类中.有三种存在方式:第一种super.xxx;(xxx为变量名或对象名)这种方法意义为,获取父类中的名字为xxx的变量或方法引用.使用这种方法可以直接访问父类中的变量或 ...

  7. ILMerge

    ILMerge http://www.microsoft.com/en-hk/download/details.aspx?id=17630 ILMerge 下载地址:http://www.micros ...

  8. owin

    app.Properties["Hello"] = System.DateTime.Now; app.Run(async context => await context.R ...

  9. GoLang之协程

    GoLang之协程 目前,WebServer几种主流的并发模型: 多线程,每个线程一次处理一个请求,在当前请求处理完成之前不会接收其它请求:但在高并发环境下,多线程的开销比较大: 基于回调的异步IO, ...

  10. reactjs 注意点

    render的return return前要留一空行 return的括号要分别各占一行,不能与html同行 return中的html必须要有顶层容器包裹 return中的循环不能用for,改用map方 ...