<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>cordova-plugin-ImagePicker Demo</title>
</head>
<body>
<button id="btn1">选择图片(最大1920*1440)</button>
<button id="btn2">选择图片(自动宽高)</button>
<div id="img_list"></div>
<script type="application/javascript">
var Demo = {
// Application Constructor
initialize: function () {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function () {
document.getElementById('btn1').onclick = Demo.getImage1;
document.getElementById('btn2').onclick = Demo.getImage2;
},
getImage1: function () {
ImagePicker.getPictures(function (result) {
Demo.showImage(result);
}, function (err) {
alert(err);
}, {
maximumImagesCount: 9,
width: 1920,
height: 1440,
quality: 100
});
},
getImage2: function () {
ImagePicker.getPictures(function (result) {
Demo.showImage(result);
}, function (err) {
alert(err);
}, {
maximumImagesCount: 9,
width: -1,
height: -1,
quality: 100
});
},
showImage: function (result) {
var list = result.images;
var imgContainer = document.getElementById("img_list");
imgContainer.innerHTML = "";
for (var i = 0; i < list.length; i++) {
var x = list[i];
(function (x) {
var div = document.createElement("div");
// 选图插件返回的宽高、体积
var node = document.createElement('p');
node.innerHTML = x.path + "<br>resultWidth: " + x.width + ", resultHeight: " +
x.height + ', size: ' + x.size;
div.appendChild(node);
// 创建对象
var img = new Image();
img.onload = function () {
// 实际宽高
var node = document.createElement('p');
node.innerHTML = "naturalWidth: " + img.naturalWidth + ", naturalHeight: " +
img.naturalHeight;
div.appendChild(node);
};
img.src = x.path + '?' + new Date().getTime();
img.width = 200;
div.appendChild(img);
imgContainer.appendChild(div);
})(x)
}
}
};
Demo.initialize();
</script>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>