Update index.html

giantss · Jun 1, 2018 · c0b72de · c0b72de
1 parent 91790b5
commit c0b72de
Showing 1 changed file with 73 additions and 54 deletions.
diff --git a/www/index.html b/www/index.html
@@ -1,69 +1,88 @@
 <!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">
+    <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 x in list) {
-                if (list.hasOwnProperty(x)) {
+    <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;
+                            node.innerHTML = "naturalWidth: " + img.naturalWidth + ", naturalHeight: " +
+                                img.naturalHeight;
                             div.appendChild(node);
                         };
-                        img.src = list[x] + '?' + new Date().getTime();
+                        img.src = x.path + '?' + new Date().getTime();
                         img.width = 200;
 
                         div.appendChild(img);
@@ -72,11 +91,11 @@
                     })(x)
                 }
             }
-        }
-    };
+        };
 
-    Demo.initialize();
-</script>
-<script type="text/javascript" src="cordova.js"></script>
+        Demo.initialize();
+    </script>
+    <script type="text/javascript" src="cordova.js"></script>
 </body>
+
 </html>