小云菜
小云菜
  • 发布:2015-04-26 23:07
  • 更新:2022-08-13 15:22
  • 阅读:77309

分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片

分类:MUI

2016-08-05更新:
下方的代码是比较OLD的了,是通过js进行图片的剪切 旋转 再生成,效率较低。
后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这
。页面中有详细的说明,需要的童鞋们可以参考以下。

代码整合了
1.多串君
2. 伟子
两个人的demo,
其中resize原来的filereader在5 中更改为plus.io.FileReader()方不报错。
如有错误,请不吝批评指正。

更新日志:
2015-05-09 1020450921@qq.com
1.修复了ios下无法获取图片宽高的问题:
ios下不在img.onload中是获取不到文件对象的。
2. 新增了最大宽度(高度)的判别,按比例压缩。
具体代码如下:

<!DOCTYPE html>  
<html>  
  
	<head>  
		<meta charset="utf-8">  
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
		<title></title>  
		<link href="http://ask.dcloud.net.cn/../../../css/mui.min.css" rel="stylesheet" />  
		<style type="text/css">  
			body {  
				background-color: #efeff4;  
			}  
			.mui-content {} .mui-content a {  
				color: #8F8F94;  
			}  
			.mui-content a.active {  
				color: #007aff;  
			}  
			.mui-title {  
				font-family: simhei;  
			}  
			.btn_1 {  
				position: absolute;  
				bottom: 100px;  
				left: 10px;  
				right: 10px;  
			}  
			.btn_2 {  
				position: absolute;  
				bottom: 20px;  
				left: 10px;  
				right: 10px;  
			}  
			.mui-btn-block {  
				width: 90%;  
				margin: 0 auto;  
			}  
			body {  
				overflow: hidden;  
			}  
			.showimg {  
				margin: 20px 10px auto 10px;  
				text-align: center;  
			}  
		</style>  
	</head>  
  
	<body>  
		<header class="mui-bar mui-bar-nav">  
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
			<h1 class="mui-title">上传身份证照片</h1>  
			<a class="mui-pull-right mui-icon mui-icon-upload" onclick="imgupgrade()"></a>  
		</header>  
		<!--  
	作者:1020450921@qq.com  
	时间:2015-04-24  
	描述:参考 http://ask.dcloud.net.cn/question/2089  
-->  
		<div class="mui-content">  
			<div class="showimg">  
  
			</div>  
			<button type="button" class="mui-btn mui-btn-primary mui-btn-block  btn_1" onclick="galleryImgs()">从相册中选择图片</button>  
			<br>  
			<button type="button" class="mui-btn mui-btn-success mui-btn-block btn_2" onclick="cameraimages()">拍照</button>  
		</div>  
	</body>  
	<script src="../../../js/mui.min.js"></script>  
	<script src="../../../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>  
	<script src="../../../js/exif.js" type="text/javascript" charset="utf-8"></script>  
	<script src="../../../js/canvasResize.js" type="text/javascript" charset="utf-8"></script>  
  
	<script type="text/javascript">  
		mui.init();  
		mui.plusReady(function() {})  
                  
               //上传单张图片  
		function galleryImg() {  
			//每次拍摄或选择图片前清空数组对象  
			f1.splice(0, f1.length);  
			document.getElementsByClassName("showimg")[0].innerHTML = null;  
			// 从相册中选择图片  
			mui.toast("从相册中选择一张图片");  
			plus.gallery.pick(function(path) {  
				showImg(path);  
			}, function(e) {  
				mui.toast("取消选择图片");  
			}, {  
				filter: "image",  
				multiple: false  
			});  
		}  
  
		function galleryImgs() {  
				//每次拍摄或选择图片前清空数组对象  
				f1.splice(0, f1.length);  
				document.getElementsByClassName("showimg")[0].innerHTML = null;  
				// 从相册中选择图片  
				mui.toast("从相册中选择不超过两张图片");  
				plus.gallery.pick(function(e) {  
					if (e.files.length != 2) {  
						mui.toast('请选择身份证正面和背面照片共两张');  
						return false;  
					}  
					for (var i in e.files) {  
						showImg(e.files[i]);  
					}  
				}, function(e) {  
					mui.toast("取消选择图片");  
				}, {  
					filter: "image",  
					multiple: true  
				});  
			}  
			// 拍照添加文件  
  
		function cameraimages() {  
				//每次拍摄或选择图片前清空数组对象  
				f1.splice(0, f1.length);  
				document.getElementsByClassName("showimg")[0].innerHTML = null;  
				var cmr = plus.camera.getCamera();  
				cmr.captureImage(function(p) {  
					plus.io.resolveLocalFileSystemURL(p, function(entry) {  
						var localurl = entry.toLocalURL(); //把拍照的目录路径,变成本地url路径,例如file:///........之类的。  
						showImg(localurl);  
					});  
				}, function(e) {  
					mui.toast("很抱歉,获取失败 "   e);  
				});  
			}  
			// 全局数组对象,添加文件,用于压缩上传使用  
		var f1 = new Array();  
  
                 
function showImg(url) {  
	// 兼容以“file:”开头的情况  
	if (0 != url.toString().indexOf("file://")) {  
		url = "file://" + url;  
	}  
	var _div_ = document.getElementsByClassName("showimg")[0];  
	var _img_ = new Image();  
	_img_.src = url; // 传过来的图片路径在这里用。  
       	_img_.onclick = function() {  
				plus.runtime.openFile(url);  
			};  
	_img_.onload = function() {  
		var tmph = _img_.height;  
		var tmpw = _img_.width;  
		var isHengTu = tmpw > tmph;  
		var max = Math.max(tmpw, tmph);  
		var min = Math.min(tmpw, tmph);  
		var bili = min / max;  
		if (max > 1200) {  
			max = 1200;  
			min = Math.floor(bili * max);  
		}  
		tmph = isHengTu ? min : max;  
		tmpw = isHengTu ? max : min;  
		_img_.style.border = "1px solid rgb(200,199,204)";  
		_img_.style.margin = "10px";  
		_img_.style.width = "150px";  
		_img_.style.height = "150px";  
		_img_.onload = null;  
		plus.io.resolveLocalFileSystemURL(url, function(entry) {  
				entry.file(function(file) {  
					console.log(file.size + '--' + file.name);  
					canvasResize(file, {  
						width: tmpw,  
						height: tmph,  
						crop: false,  
						quality: 50, //压缩质量  
						rotate: 0,  
						callback: function(data, width, height) {  
							f1.push(data);  
							_img_.src = data;  
							_div_.appendChild(_img_);  
							plus.nativeUI.closeWaiting();  
						}  
					});  
				});  
			},  
			function(e) {  
				plus.nativeUI.closeWaiting();  
				console.log(e.message);  
			});  
	};  
};  
  
		function imgupgrade() {  
				mui.toast('后台联调时启用上传功能');  
				return;  
				var wt = plus.nativeUI.showWaiting();  
				var url = '后台地址';  
				var dataType = 'json';  
				//发送数据    
				var data = {  
					files1: f1 //base64数据          
				};  
				mui.post(url, data, success, dataType);  
			}  
			//成功响应的回调函数  
		var success = function(response) {  
			plus.nativeUI.closeWaiting();  
			if (response != null) {  
				alert("上传成功");  
			}  
		}  
	</script>  
  
</html>

伟子的js代码我放在了附件中。

41 关注 分享
尘岳two 蔡繁荣 杨羊羊 DCloud_heavensoft Jenson jwenlee Mr丶Leo 踩着单车载着猪 Riven ztingjian 大鱼泡泡 青岛哲少 如啼眼 damdmen 你好卟 Jang barice 719540388 豆花饭 ai666 4***@qq.com 2***@qq.com Android_XR Trust m***@outlook.com 赵 前端菜鸟哟 ias06111 t***@qq.com 1***@qq.com 五九 5***@qq.com MR不靠谱 3***@qq.com 1***@qq.com 1***@qq.com c***@163.com skysowe 2***@qq.com 1***@qq.com 2***@qq.com

要回复文章请先登录注册

专注写bug

专注写bug

回复 5***@qq.com :
改成plus.io.FileReader(file, { 我刚试了的
2018-03-14 12:11
5***@qq.com

5***@qq.com

canvasResize is not defined
为什么说没有定义呀
2017-10-27 01:13
h***@163.com

h***@163.com

回复 6***@qq.com :
不用获取,直接做得base64,入库就行了
2017-10-20 17:55
6***@qq.com

6***@qq.com

回复 y***@qq.com :
你的弄好了吗,我php不知道如何获取数据
2017-09-13 13:55
y***@qq.com

y***@qq.com

php 端怎么获取数据呢?
2017-07-29 23:47
1***@qq.com

1***@qq.com

这套代码好像只能用楼主提供的版本插件、我另外找的插件版本不同就会报错、感谢楼主分享~
2017-05-24 11:42
1***@qq.com

1***@qq.com

mark
2017-03-22 23:28
1***@qq.com

1***@qq.com

上传为后台的时候显示的也是空
2017-03-14 17:30
三月

三月

用不了
2017-02-16 11:08
w***@sina.com

w***@sina.com

base64上传到服务器时,后台通过string来获取吧?我用string获取时是null值
2017-01-18 16:38