请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 536|回复: 0

微擎手机端调用拍照和选择图片功能

[复制链接]
  • TA的每日心情
    开心
    2019-5-30 08:42
  • 签到天数: 10 天

    [LV.3]偶尔看看II

    425

    主题

    429

    帖子

    2013

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    2013
    admin实名认证 发表于 2019-3-18 15:30:14 | 显示全部楼层 |阅读模式
    我们在使用微擎开发应用模块的时候,需要开发用户手机端上传图片或者视频的场景。1、遇到的问题,每当遇到需要在微信工具才能打开的网页,思考:
    1. MobilePage class History_EweiShopV2Page extends MobileLoginPage
    复制代码

    这个是要经过微信授权的。

    2、利用微信图片上传功能,微信调用拍照和选择图片功能 ,微信JS-SDK说明文档 在域名验证,授权成功的基础上遇到的问题。
    当你在微信工具调用时出现
    1. chooseImage:fail, the permission value is offline verifying
    复制代码

    说明jsApiList js接口列表没有
    1. chooseImage wx.config({
    2.      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    3.      appId: '', // 必填,公众号的唯一标识
    4.      timestamp: , // 必填,生成签名的时间戳
    5.     nonceStr: '', // 必填,生成签名的随机串
    6.      signature: '',// 必填,签名,见附录1
    7.      jsApiList: ['chooseImage','xx'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    8. });
    复制代码

    实例:单张图片上传并成功显示(条件已经授权成功并调用)
    拍照上传查看HTML代码:
    1. <div class="fui-cell">
    2.         <div class="fui-cell-label">身份证正面:</div>
    3.         <div class="row">
    4.                 <input id="identiry_img_input" name="identiry_img_input" type="hidden">
    5.                 <div class="col-md-6">
    6.                         <button type="button" class="btn block camera" onclick="upload('identify_img')">上传照片</button>
    7.                 </div>
    8.                 <div class="col-md-6">
    9.                         <img onclick="previewImage('identify_img')" id="identify_img" src="" alt="" width="60px" height="60px" />
    10.                 </div>
    11.         </div>
    12. </div>
    复制代码
    模板效果如下图:
    QQ图片20190318153033.png

    javascript代码:
    1. <script>
    2. function upload(data){
    3.         $var_img = data; //selertor
    4.         $var_input = $('#'+data+'_input'); //图片值 identify_img2_input
    5.         wx.chooseImage({
    6.                 count:1, //默认9
    7.                 sizeType:['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    8.                 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    9.                 success:function(res){
    10.                         //images.localId = res.localIds;
    11.                         localIds = res.localIds; //返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
    12.                         document.getElementById('$var_img').src = localIds; //选择的图片 显示
    13.                         //必须做一下mediaId的设定,否则将会无法在安卓端得到微信上传功能的触发
    14.                         localId = localIds.tostring(); //在成功选择图片或者拍照的时候 可以触发上传图片
    15.                         wx.uploadImage({
    16.                                 localId:localId, //需要上传的图片的本地ID,由chooseImage接口获得
    17.                                 isShowProgressTips:1, //默认为1,显示进度提示
    18.                                 success:function(res){
    19.                                         var serverId = res.serverId; //返回图片的服务器端ID 4HY4_D5p8ZcBIeVPKUIkvWBd7OlNr_f2TVPAs32xnb5oZQDugO1qPYoz-7Jpc095
    20.                                         //当成功从微信服务端返回 serverid 上传到php自己服务器上
    21.                                         $.ajax({
    22.                                                 url:"{php echo $this->createMobileUrl('member/info/getmedia')}",
    23.                                                 type:'POST',
    24.                                                 data:{media_id:serverId},
    25.                                                 dataType:'json',
    26.                                                 success:function(data){
    27.                                                         if(data.error == 1){
    28.                                                                 alert(data.message);
    29.                                                         }else{
    30.                                                                 $($var_input).val(data.realimgurl); //图片显示在前端<img>
    31.                                                         }
    32.                                                 },
    33.                                                 error:function(request){
    34.                                                         alert("Connection error"); //make-in-lemon 正式使用可选择屏蔽
    35.                                                 }
    36.                                         });
    37.                                 },
    38.                                 fail:function(res){
    39.                                         alert(res.errMsg);
    40.                                         //alert(JSON.stringify(res))
    41.                                 }
    42.                         });
    43.                 }
    44.         });
    45. }
    46. </script>
    复制代码
    php代码:
    1. public function getmedia() {
    2.         global $_W, $_GPC;
    3.         //$access_token = WeAccount::token(); $media_id = $_GPC['media_id'];
    4.         //4HY4_D5p8ZcBIeVPKUIkvWBd7OlNr_f2TVPAs32xnb5oZQDugO1qPYoz-7Jpc095
    5.         $media_id = '4HY4_D5p8ZcBIeVPKUIkvWBd7OlNr_f2TVPAs32xnb5oZQDugO1qPYoz-7Jpc095';
    6.         $access_token = "8HB-zIqVZK_VB08WJFFXGNohsVknCalzlkTXeLGQSCb9x654gI1_oO95Jzd7KYbS2urNtIv6e-y6IYObjKINbwzkdbZNUSrbciYsHljqXYSiU_P6D_0WHPJm5JHu4XeMONJeABASRN";
    7.         $url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" . $access_token . "&media_id=" . $media_id;
    8.         $updir = "../attachment/images/" . $_W['uniacid'] . "/" . date("Y", time()) . "/" . date("m", time()) . "/";
    9.         if (!file_exists($updir)) {
    10.                 mkdir($updir, 511, true);
    11.                 //创建一个目录
    12.         }
    13.         $randimgurl = "images/" . $_W['uniacid'] . "/" . date("Y", time()) . "/" . date("m", time()) . "/" . date('YmdHis') . rand(1000, 9999) . '.jpg';
    14.         $targetName = "../attachment/" . $randimgurl;
    15.         $ch = curl_init($url);
    16.         $fp = fopen($targetName, 'wb');
    17.         curl_setopt($ch, CURLOPT_FILE, $fp);
    18.         curl_setopt($ch, CURLOPT_HEADER, 0);
    19.         curl_exec($ch); curl_close($ch);
    20.         fclose($fp);
    21.         if (file_exists($targetName)) {
    22.                 $resarr['error'] = 0;
    23.                 $this->mkThumbnail($targetName, 640, 0, $targetName);
    24.                 if (!empty($_W['setting']['remote']['type'])) {
    25.                         load()->func('file');
    26.                         $remotestatus = file_remote_upload($randimgurl, true);
    27.                         if (is_error($remotestatus)) {
    28.                                 $resarr['error'] = 1;
    29.                                 $resarr['message'] = '远程附件上传失败,请检查配置并重新上传';
    30.                                 file_delete($randimgurl);
    31.                                 die(json_encode($resarr));
    32.                         } else {
    33.                                 file_delete($randimgurl);
    34.                                 $resarr['realimgurl'] = $randimgurl;
    35.                                 $resarr['imgurl'] = tomedia($randimgurl);
    36.                                 $resarr['message'] = '上传成功';
    37.                                 die(json_encode($resarr));
    38.                         }
    39.                 }
    40.                 $resarr['realimgurl'] = $randimgurl;
    41.                 $resarr['imgurl'] = tomedia($randimgurl);
    42.                 $resarr['message'] = '上传成功';
    43.         } else {
    44.                 $resarr['error'] = 1;
    45.                 $resarr['message'] = '上传失败';
    46.         }
    47.         echo json_encode($resarr, true); die; }
    48. }
    复制代码
    大功告成!
    maomivip@mail.com
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|寿光赢创志诚信息技术有限公司 ( 鲁ICP备19000917号 )

    GMT+8, 2019-6-20 15:09 , Processed in 0.061844 second(s), 24 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表