2016-08-05更新：
下方的代码是比较OLD的了，是通过js进行图片的剪切 旋转 再生成，效率较低。
后来又整合了一个利用native.js本地接口的压缩代码 ，链接在这
。页面中有详细的说明，需要的童鞋们可以参考以下。
源码地址 https://github.com/phillyx/MUIDemos/tree/dce9283ea3e0726ccff0e8ef5b25fa028025ac69
代码整合了
1.多串君
- 伟子
两个人的demo,
其中resize原来的filereader在5 中更改为plus.io.FileReader()方不报错。
如有错误，请不吝批评指正。
更新日志：
2015-05-09 [email protected]
1.修复了ios下无法获取图片宽高的问题：
ios下不在img.onload中是获取不到文件对象的。
新增了最大宽度（高度）的判别，按比例压缩。
具体代码如下：
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>
<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 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("上传成功"); } }
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 = ur l; // 传过来的图片 路径在这里用。 img.onclick = function () { plus.runtime.openFile(url); }; img.onload = functi on() { 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); }); }; };
原文 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片