调用微信拍照和选择图片功能
任务需求背景:购买商品,下单完成之后要实名验证,再安排发货
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; }