微信开发，图片接口

微信接口 —— 图片接口

一、HTML部分

< input  type = "button"  value = "checkJSAPI"  id = "checkJsApi" >< br >

       < h3  id = "menu-image" >图像接口</ h3 >

       < span  class = "desc" >拍照或从手机相册中选图接口</ span >< br >

       < button  class = "btn btn_primary"  id = "chooseImage" >chooseImage</ button >< br >

       < span  class = "desc" >预览图片接口</ span >< br >

       < button  class = "btn btn_primary"  id = "previewImage" >previewImage</ button >< br >

       < span  class = "desc" >上传图片接口</ span >< br >

       < button  class = "btn btn_primary"  id = "uploadImage" >uploadImage</ button >< br >

       < span  class = "desc" >下载图片接口</ span >< br >

       < button  class = "btn btn_primary"  id = "downloadImage" >downloadImage</ button >< br >

   显示图片< imgalt = "" src = "" id = "faceImg" data-bd-imgshare-binded = "1" >

二、 JS部分，在<script>...</script>之间

wx.config({
        debug: false,
        appId: '@ViewBag.WxAppId', // 必填，公众号的唯一标识
        timestamp: '@ViewBag.TimeStamp', // 必填，生成签名的时间戳
        nonceStr: '@ViewBag.Nonce', // 必填，生成签名的随机串
        signature: '@ViewBag.Signature',// 必填，签名，见附录1
        jsApiList: ['checkJsApi',
             'scanQRCode',// 微信扫一扫接口
             'chooseImage',
             'previewImage',
             'uploadImage',
             'downloadImage'
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function () {

此处为微信接口

  });
    //初始化jsapi接口 状态
    wx.error(function (res) {
        alert("调用微信jsapi返回的状态:" + res.errMsg);
    });
    //初始化加载数据
    $(document).ready(function () {
                


    });

三、 weixin-JS-JDK部分，在 wx.ready（function（）{ .... }）之间

// 5 图片接口
  // 5.1 拍照、本地选图
  var images = {
    localId: [],
    serverId: []
  };
  document.querySelector('#chooseImage').onclick = function () {
    wx.chooseImage({
      success: function (res) {
        images.localId = res.localIds;
        alert('已选择 ' + res.localIds.length + ' 张图片');
      }
    });
  };

  // 5.2 图片预览
  document.querySelector('#previewImage').onclick = function () {
    wx.previewImage({
      current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
      urls: [
        'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
        'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
        'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
      ]
    });
  };

  // 5.3 上传图片
  document.querySelector('#uploadImage').onclick = function () {
    if (images.localId.length == 0) {
      alert('请先使用 chooseImage 接口选择图片');
      return;
    }
    var i = 0, length = images.localId.length;
    images.serverId = [];
    function upload() {
      wx.uploadImage({
        localId: images.localId[i],
        success: function (res) {
          i++;
          alert('已上传：' + i + '/' + length);
          images.serverId.push(res.serverId);
          if (i < length) {
            upload();
          }
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    }
    upload();
  };

  // 5.4 下载图片
  document.querySelector('#downloadImage').onclick = function () {
    if (images.serverId.length === 0) {
      alert('请先使用 uploadImage 上传图片');
      return;
    }
    var i = 0, length = images.serverId.length;
    images.localId = [];
    function download() {
      wx.downloadImage({
        serverId: images.serverId[i],
        success: function (res) {
          i++;
          alert('已下载：' + i + '/' + length);
          images.localId.push(res.localId);
          if (i < length) {
            download();
          }
        }
      });
    }
    download();
  };