E企盈营销工具技术服务商 热线:4006-838-530

微信广河县E企盈小程序小程序相机组件的使用

最近开发人脸识别登录系统,需要在微信中调用相机实现拍照上传功能,最开始使用H5input控件实现,但界面不太美观,H5的getMedia只兼容几个主流的浏览器,所以就研究了微信相机组件的开发,过程经历了许多坑 . . . . . .H5利用input标签直接调用相机:https://blog.csdn.net/qq_25101225/article/details/81034626首先需要获取使用微信JS-SDK的授权配置(参数可以后台ajax获取):var url = window.location.href;$.ajax({    url: url_root + "/wechat/get_signature",    type: "post",    data: { "url" : url },    dataType: "json",    success: function (data) {        wx.config({    appId: data.data.appId,    timestamp: data.data.timestamp,    nonceStr: data.data.nonceStr,    signature: data.data.signature,    jsApiList: ['createCameraContext','camera']});    }});

index.Wxml device-position:前置或后置,值为front, back; flash:闪光灯,值为auto, on, off; bindstop:摄像头在非正常终止时触发,如退出后台等情况;binderror:用户不允许使用开通毛绒玩具小程序电话:4006-838-530摄像头时触发。view class="page-body"  view class="page-body-wrapper"    camera device-position="front" flash="off" binderror="error" style="width: 100%; height: 300px;"/camera    view class="btn-area"      button type="primary" bindtap="takePhoto"拍照/button    /view    view class="btn-area"      button type="primary" bindtap="startRecord"开始录像/button    /view    view class="btn-area"     开通中性笔小程序电话:4006-838-530 button type="primary" bindtap="stopRecord"结束录像/button    /view    view class="preview-tips"预览/view    image wx:if="{{src}}" mode="widthFix" src="{{src}}"/image    video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"/video  /view/view

index.jsPage({  onLoad() {    this.ctx = wx.createCameraContext()  },  takePhoto() {    this.ctx.takePhoto({      quality: 'high',      success: (res) = {        this.setData({          src: res.tempImagePath        })      }    })  },  startRecord() {    this.ctx.startRecord({      success: (res) = {        console.log('startRecord')      }    })  },  stopRecord() {    this.ctx.stopRecord({      success: (res) = {        this.setData({          src: res.tempThumbPath,          videoSrc: res.tempVideoPath        })      }    })  },  error(e) {    console.log(e.detail)  }})

官网文档:https://developers.weixin.qq.com/miniprogram/dev/api/api-ca开通超耐磨小程序电话:4006-838-530mera.html                https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.4213981683521064#1W3Cschool文档:https://www.w3cschool.cn/weixinapp/weixinapp-c2u72j31.html

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信广河县E企盈小程序小程序相机组件的使用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏