目录

概述

本插件的作用是：在图片库选择一张或多张图片，将图片显示在页面。

JS调用方法

1、require(“cordova!com.synconset.imagepicker”);
2、本文对应的插件demo使用了一个方法：

  • getPictures：获取图片的信息

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
define(function(require){
    var $ = require("jquery");
    require("cordova!com.synconset.imagepicker");
    var utils = require("$UI/demo/plugin/utils");
    var Model = function(){
        this.callParent();
    };
     
    Model.prototype.getPicturesClick = function(event){
        document.addEventListener("deviceready", androidOnDeviceReady, false);
    function androidOnDeviceReady() {
        /*
        调用getPictures有三个参数，成功回调，失败回调和options。option参数仅限于android端使用。
        options有以下几个下参数(maximumImagesCount,width,height,quality,outputType)，说明如下
        options = {        
            图片选择数量默认为15张，如果设置为1张，点选一张图片后即可返回该图片路径。
            最大图片选择数量，规定了每次最多选择几张图片。
            maximumImagesCount: int,
             
            图片的高度和宽度限定，举例说明:如果宽高都设定为800，图片最大为800像素*800像素，如果宽度为800，高度为0，则图片则会有800像素宽。
            如果都写成0，则按照图片大小显示               
            width: int,
            height: int,
             
            图片质量，取值为0-100
            quality: int (0-100),
             
            导出图片的类型，默认为window.imagePicker.OutputType.FILE_URI(实际值为0)，可选window.imagePicker.OutputType.BASE64_STRING (实际值为1)
            outputType: int
            };
        */
        imagePicker.getPictures(androidSuccessCallback, errorCallback,
                {
                    "maximumImagesCount":10,
                    "width":800,
                    "height":800,
                    "quallity":100,
                    "outputType":window.imagePicker.OutputType.FILE_URI
                }
        );
    }
    function androidSuccessCallback(result) {
 
      if (result.length > 0) {
        var content = '';
        var dfds = [];
        for (var i = 0; i < result.length; i++) {
          (function(){
              var dfd = $.Deferred();
              dfds.push(dfd);
              
              window.resolveLocalFileSystemURI(result[i],function(entry){
                  content += '<img src="'+ entry.toInternalURL() +'" style="max-width:200px"/>';
                  alert(content);
                  dfd.resolve();
              },function(){
                dfd.resolve();
              });
          })();
        }
         
        $.when.apply($,dfds).done(function(){
             
          document.getElementById("imageOutput").innerHTML = content;
        });
      } else {
        // picker was cancelled
        console.log("没有选择图片");
      }
     
}
    function errorCallback(error) {
        alert("错误信息: " + JSON.stringify(error));
    }
}
    Model.prototype.modelModelConstructDone = function(event) {
        utils.showCode(this,"getPicturesClick").prettyPrint();
    };
    return Model;
});

注意事项

1、demo处理返回的结果是URL：entry.toInternalURL()。用标签显示图片，可以根据自己的需要利用URL。
2、imageOutput是页面div标签的id名。