jssdk的圖像接口

項目中遇到了需要在微信公衆號裏上傳圖片的功能。如圖所示：

點擊“認證照片”按鈕就需要調用微信圖像接口，上傳到微信服務器，可以預覽，也可以下載到自己的服務器上，代碼如下：

1.引入js（有些新接口需要引用到1.2.0，這個是目前最新的版本）

<script src='http://res.wx.qq.com/open/js/jweixin-1.2.0.js'></script>

2.初始化配置

wx.config({
        // debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
        appId: '{{appId}}', // 必填，公衆號的唯一標識
        timestamp:'{{timestamp}}' , // 必填，生成簽名的時間戳
        nonceStr: '{{nonceStr}}', // 必填，生成簽名的隨機串
        signature: '{{signature}}',// 必填，簽名，見附錄1
        jsApiList: [
            'chooseImage',  
            'previewImage',  
            'uploadImage',  
            'downloadImage',
            'getLocalImgData'
            // 'openAddress'//收貨地址
        ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
    });

3.調用圖像接口（適配蘋果的圖像顯示）

wx.ready(function(){
        // config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
        // wx.checkJsApi({
        //     jsApiList: ['openAddress'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
        //     success: function(res) {
        //         // 以鍵值對的形式返回，可用的api值true，不可用爲false
        //         // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        //         // alert(res)
        //     }
        // });


        $('.addFir').on('click',function(){
          //type:  1:圖片一   2:圖片二
          var type = 1;
          wxImg(type);
        });
        $('.addSec').on('click',function(){
          var type = 2;
          wxImg(type);
        });
        function wxImg(type){
          // var images = {localId:[],serverId:[]};
          var localId = [];
          var serverId = [];
           //調用 拍照或從手機相冊中選圖接口
           wx.chooseImage({
               success: function(res) {
                   if (res.localIds.length > 2) {
                       $.toast("只能上傳一張圖片");
                       return;
                   }
                   // console.log(res.localIds.length)
                   //返回選定照片的本地ID列表
                   localId = res.localIds;
                   if(type==1){
                      $('.cardImg01').attr('src',localId[0]);
                   }else if(type==2){
                      $('.cardImg02').attr('src',localId[0]);
                   }

                   //獲取本地地址，修復蘋果無法顯示圖片的bug
                   if(window.__wxjs_is_wkwebview){//判斷iphone是不是用的wkwebview內核
                      wx.getLocalImgData({
                          localId: localId[0], // 圖片的localID
                          success: function (res) {
                              var localData = res.localData; // localData是圖片的base64數據，可以用img標籤顯示
                              if(type==1){
                                  $('.cardImg01').attr('src',localData);
                               }else if(type==2){
                                  $('.cardImg02').attr('src',localData);
                               }
                          }
                      });
                   }

                   //上傳圖片函數
                   function upload() {
                       //調用上傳圖片接口
                       wx.uploadImage({
                           localId: localId[0], // 需要上傳的圖片的本地ID，由chooseImage接口獲得
                           isShowProcess: 1,   // 默認爲1，顯示進度提示
                           success: function(res) {
                               //返回圖片的服務器端ID res.serverId,然後調用wxImgCallback函數進行圖片serverId操作
                               wxImgCallback(res.serverId,type);
                           },
                           fail: function(res) {
                              $.toast("圖片上傳失敗");
                           }
                       });
                   }
                   upload();
               }
           });
        }
        function wxImgCallback(serverId,type) {
          if(type==1){
             $('.hid01').val(serverId);
          }else if(type==2){
             $('.hid02').val(serverId);

          }
        }
        // wx.openAddress({
        //     success: function (res) {
        //         var userName = res.userName; // 收貨人姓名
        //         var postalCode = res.postalCode; // 郵編
        //         var provinceName = res.provinceName; // 國標收貨地址第一級地址（省）
        //         var cityName = res.cityName; // 國標收貨地址第二級地址（市）
        //         var countryName = res.countryName; // 國標收貨地址第三級地址（國家）
        //         var detailInfo = res.detailInfo; // 詳細收貨地址信息
        //         var nationalCode = res.nationalCode; // 收貨地址國家碼
        //         var telNumber = res.telNumber; // 收貨人手機號碼
        //         alert('省:'+provinceName+'市'+cityName+'縣'+countryName)
        //     }
        // });


    });