Micro-letter Js-sdk Preview Image interface and sample _javascript from photo or mobile album interface

This article is an example of the micro-letter Js-sdk preview Image interface and from the photo or phone album Select interface usage. Share to everyone for your reference, specific as follows:

In the current version of JS-SDK 1.0, the preview image provides 2 interfaces, and the definition of the interface refers to the official document

1. Preview the network picture HTTP link

2. Preview the local picture wenxin://link

First, preview picture interface

Note:

1. Preview image interface currently only supports micro-letter mobile phone version
2. The preview image only supports HTTP connections and cannot be previewed for weixin://
3. The address of the preview image needs to be encrypted, especially if there is Chinese in the path, the Window.encodeuri () method is needed

Example Description:

1. The preview picture will show download failure
wx.previewimage {current
  : ' Http://localhost/content/images/ice moon cakes. jpg ',
  urls:[
    ' http://localhost/content/images/ice-skinned mooncakes. jpg '
  ]
};
Preview picture succeeded
Wx.previewimage ({current
  : ' http://localhost/content/images/%E5%86%B0%E7%9A%AE%E6%9C%88%E9% A5%bc.jpg ',
  urls:[
    ' http://localhost/content/images/%E5%86%B0%E7%9A%AE%E6%9C%88%E9%A5%BC.jpg '
  ]
});

Custom Preview page, specify the picture instance:

var imglist=$ ('. row img ');
var urllist=[];
Imglist.each (function () {
  var url= ' http://' +location.host+$ (this). attr (' src ');
  Handle the Chinese in the URL
  url=window.encodeuri (URL);
  Urllist.push (URL);
};
1. Preview image interface currently only supports micro-letter mobile phone version
//2. The preview picture only supports HTTP connections, and for weixin://cannot preview
wx.previewimage ({
  current:urllist[0),
  urls:urllist
});

Second, from the photo or mobile phone album to select pictures, preview the local picture

1. Returns a list of local IDs for the selected photos, localid can display pictures as the SRC attribute of the IMG tag, and the link addresses are weixin://resourceid/xxxx

2. Localid can be used for micro-letter mobile phone layout display (currently PC version is not available)

Example 1:

2. Select Picture Single picture
wx.chooseimage ({
  count:1,//Default 9
  sizetype: [' original ', ' compressed '],//can specify whether the original image or the compression diagram, Both of the defaults have
  sourcetype: [' album ', ' Camera '],//can specify whether the source is an album or a camera, both of which have
  success:function (res) {
    var localids = Res.localids;
    Returns a list of local IDs for the selected photos, Localid can be used as the SRC attribute of the IMG tag to display the picture
    //Localid can be applied to the micro-letter mobile layout display (currently PC version is not available)
    $ (' #imgTarget '). attr (' src ' , Localids[0]);

Example 2:

Select multiple pictures
wx.chooseimage ({
  count:4,
  sizetype:[' original '),
  sourcetype:[' album ', ' Camera '],
  Success:function (res) {
    var localids=res.localids;
    for (var i = 0; i < localids.length i++) {
      var localid=localids[i];
      Addimg (Localid);
    }
  }
);
Add a picture to the row
function addimg (src) {
  var col=$ (' <div/> ');
  Col.addclass (' col-xs-6 col-md-3 ');
  var a=$ (' <a/> ');
  A.addclass (' thumbnail ');
  var img=$ ('  ');
  Img.attr (' src ', src);
  A.append (IMG). append (src);
  Col.append (a);
  $ ('. Row '). Append (col);
}

More readers interested in JavaScript-related content can view this site: "JavaScript in the JSON Operation tips Summary", "JavaScript switching effects and techniques summary", "JavaScript Search Algorithm Skills summary", " JavaScript animation effects and tips Summary, "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and Skills summary" and "JavaScript Mathematical operation Usage Summary"

I hope this article will help you with JavaScript programming.