调用微信拍照和选择图片功能

时间 2019-11-30

标签调用微信拍照选择图片功能繁體版

原文原文链接

任务需求背景：购买商品，下单完成以后要实名验证，再安排发货php

1.遇到的问题,每当遇到须要在微信工具才能打开的网页,思考html

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