調用微信拍照和選擇圖片功能

任務需求背景：購買商品，下單完成以後要實名驗證，再安排發貨

1.遇到的問題,每當遇到須要在微信工具才能打開的網頁,思考

MobilePage

class History_EweiShopV2Page extends MobileLoginPage 這個是要通過微信受權的
2.利用微信圖片上傳功能
微信調用拍照和選擇圖片功能 
微信JS-SDK說明文檔
在域名驗證,受權成功的基礎上
遇到的問題.當你在微信工具調用時出現chooseImage:fail, the permission value is offline verifying

說明jsApiList js接口列表沒有chooseImage

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: ['chooseImage','xx'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2

});
實例:單張圖片上傳併成功顯示(條件已經受權成功並調用)
拍照上傳查看

1 <div class='fui-cell'>
2    <div class='fui-cell-label'>身份證正面:</div>
3    <div class="row" >
4       <input id="identify_img_input"  name="identify_img_input" type="hidden">
5       <div class="col-md-6"> <button type="button" class="btn  block camera" onclick="upload('identify_img')">上傳照片</button></div>
6       <div class="col-md-6"><img onclick="previewImage('identify_img')" id="identify_img" src="" alt="" width="60px" height="60px"/></div>
7 
8    </div>
9 

</div>

 

 1 function upload(data) {
 2 
 3        $var_img = data;//selertor
 4            $var_input = $('#'+data+'_input'); //圖片值 identify_img2_input
 5 
 6             wx.chooseImage({
 7                 count: 1, // 默認9
 8                 sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
 9                 sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
10                 success: function (res) {
11                     //images.localId = res.localIds;
12                     localIds = res.localIds;  // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
13                     document.getElementById($var_img).src = localIds;   //選擇的圖片 顯示
14                     //必須作一下mediaId的設定，不然將會沒法在安卓端獲得微信上傳功能的觸發
15                     localId = localIds.toString();
                  //在成功選擇圖片或拍照的時候 能夠觸發上傳圖片, 16                     wx.uploadImage({
17                         localId: localId, // 須要上傳的圖片的本地ID，由chooseImage接口得到
18                         isShowProgressTips: 1, // 默認爲1，顯示進度提示
19                          
20                         success: function (res) {
21                             var serverId = res.serverId; // 返回圖片的服務器端ID 4HY4_D5p8ZcBIeVPKUIkvWBd7OlNr_f2TVPAs32xnb5oZQDugO1qPYoz-7Jpc095

22 //當成功從微信服務端返回 serverid 上傳到php本身服務器上  23  $.ajax({ 24 url:"{php echo mobileUrl('member/info/getmedia')}", 25 type:'post', 26  data:{ 27  media_id:serverId, 28  }, 29 dataType:'json', 30 success:function(data){ 31 if (data.error == 1) { 32  alert(data.message); 33 } else { 34 35 $($var_input).val(data.realimgurl); //圖片顯示在前端<img>  36  } 37  }, 38 error: function(request) { 39 alert("Connection error");//make-in-lemon 正式發行可選擇屏蔽 40  }, 41  }); 42 43  }, 44 fail:function(res){ 45  alert(res.errMsg); 46 // alert(JSON.stringify(res)) 47  } 48  }); 49 50  } 51  }); 52 }

php服務端 上傳圖片代碼

public function getmedia()
    {
        global $_W, $_GPC;
        //$access_token = WeAccount::token();
        $media_id = $_GPC['media_id'];//4HY4_D5p8ZcBIeVPKUIkvWBd7OlNr_f2TVPAs32xnb5oZQDugO1qPYoz-7Jpc095

        $media_id = '4HY4_D5p8ZcBIeVPKUIkvWBd7OlNr_f2TVPAs32xnb5oZQDugO1qPYoz-7Jpc095';
        $access_token = "8HB-zIqVZK_VB08WJFFXGNohsVknCalzlkTXeLGQSCb9x654gI1_oO95Jzd7KYbS2urNtIv6e-y6IYObjKINbwzkdbZNUSrbciYsHljqXYSiU_P6D_0WHPJm5JHu4XeMONJeABASRN";
        $url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" . $access_token . "&media_id=" . $media_id;
        $updir = "../attachment/images/" . $_W['uniacid'] . "/" . date("Y", time()) . "/" . date("m", time()) . "/";
        if (!file_exists($updir)) {
            mkdir($updir, 511, true);//建立一個目錄
        }
        $randimgurl = "images/" . $_W['uniacid'] . "/" . date("Y", time()) . "/" . date("m", time()) . "/" . date('YmdHis') . rand(1000, 9999) . '.jpg';
        $targetName = "../attachment/" . $randimgurl;
        $ch = curl_init($url);
        $fp = fopen($targetName, 'wb');
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_exec($ch);
        curl_close($ch);
        fclose($fp);
        if (file_exists($targetName)) {
            $resarr['error'] = 0;
            $this->mkThumbnail($targetName, 640, 0, $targetName);
            if (!empty($_W['setting']['remote']['type'])) {
                load()->func('file');
                $remotestatus = file_remote_upload($randimgurl, true);
                if (is_error($remotestatus)) {
                    $resarr['error'] = 1;
                    $resarr['message'] = '遠程附件上傳失敗，請檢查配置並從新上傳';
                    file_delete($randimgurl);
                    die(json_encode($resarr));
                } else {
                    file_delete($randimgurl);
                    $resarr['realimgurl'] = $randimgurl;
                    $resarr['imgurl'] = tomedia($randimgurl);
                    $resarr['message'] = '上傳成功';
                    die(json_encode($resarr));
                }
            }
            $resarr['realimgurl'] = $randimgurl;
            $resarr['imgurl'] = tomedia($randimgurl);
            $resarr['message'] = '上傳成功';
        } else {
            $resarr['error'] = 1;
            $resarr['message'] = '上傳失敗';
        }
        echo json_encode($resarr, true);
        die;
    }

View Code