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

    在入门笔记一中比较详细的介绍了顶点着色器和片面着色器. 在入门笔记二中讲解了简单的创建OpenGL场景流程的实现,但是如果在场景中渲染任何一种几何图形,还是需要入门笔记一中的知识:Vertex Sha ...

  2. JavaWeb---总结(一)JavaWeb开发入门

    一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...

  3. sql附加数据库错误5120

    http://zhidao.baidu.com/link?url=p1o8EjUhn-RYFt1D4uIM-5HQF1oXZIRlPGaDiZ2FRMDzZDG1ooSARfkoPWG6SzTJTN6 ...

  4. json转换成对象

    在json转换成对象时,json的key会与java 类的字段一一对应.如果没有映射上的java字段会在该数据类型上填充默认值,如int 0,String null 等. 没有映射的json key在 ...

  5. JQuery------如何判断当前点击的是否是哪个类

    $(document).ready(function () { $("html").click(function (e) { if (e.target == $(".ad ...

  6. 解决Bootstrap模态框切换时页面抖动 or页面滚动条

    Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...

  7. hdu 5878 I Count Two Three (2016 ACM/ICPC Asia Regional Qingdao Online 1001)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5878 题目大意: 给出一个数n ,求一个数X, X>=n. X 满足一个条件 X= 2^a*3^ ...

  8. centos6.5分区简易操作

    fdisk /dev/sdb --->n--->p---->输入分区大小(回车就默认全部大小) mkfs.ext4 /dev/sdb1 mkdir /data 在根目录下新建data ...

  9. css 常用代码解析

    .cBan_1 .e2-pro li a{ display: block; -webkit-transition: all 0.3s linear;transition: all 0.3s linea ...

  10. 防SQL注入代码（ASP版）

    <% Dim Fy_Url,Fy_a,Fy_x,Fy_Cs(),Fy_Cl,Fy_Ts,Fy_Zx '---定义部份 头------ Fy_Cl = 1 '处理方式:1=提示信息,2=转向页面, ...