支付宝小程序camera组件取景框绘制

因公司需求，要将微信小程序转战到支付宝上面，恰好又是原生的写法，那只能迎着公司的需求来咯
现有一套微信的现成的源码，又不想重新写，费时又费力，这里推荐一个微信转支付宝的插件，贼好用

Antmove 小程序转换器（vscode插件）转过来就能用

好，说回正题，支付宝小程序的组件camera组件，不支持cover-view、cover-image 这两个组件的覆盖

<camera id="camera" frame-size='large' device-position="back" flash="{{isFlash ? 'on' : 'off'}}" style='width: 100%; height: 100vh; position: relative; z-index: 0;' />
<image class='control-item-img' src='../images/album.png' onTap='antmoveAction' data-antmove-tap='onCameraReady'></image>

直接camera组件写上去的话，发现image并没有出来，反而被camera组件挤下去了

解决办法：给 image 添加position

.control-item-img {position: absolute;top: 0;left: 0;width: 100vw;
}

然后真机就会发现，image图片就可以显示出来了

接下来就是重头戏，怎么给这个按钮添加点击事件并拍照
这里需要用到他的一个生命周期函数 onCameraReady

// 这个是直接写在 page 下面的
onCameraReady(e) {console.log('相机初始化完成');// 必须初始化完成之后才能拍照this.cameraContext = my.createCameraContext('camera');this.cameraContext.takePhoto({success(res) {// 返回拍摄照片的本地临时路径console.log(res.tempImagePath);}})},

然后剩余的组件和API的属性，你们看文档吧

camera组件：官网地址
CameraContext.takePhoto：官网地址

有啥看不懂的，欢迎留言讨论！

支付宝小程序camera组件取景框绘制相关推荐

钉钉/支付宝小程序自定义组件
钉钉/支付宝小程序自定义组件 1.新建自定义文件夹 eg:model 2.鼠标选中model 右键>新建小程序组件输入测试组件:demo 3.新建小程序组件包含四个文件: 1.acss:组件页 ...
支付宝小程序抽奖组件大转盘
介绍使用支付宝原有的大转盘营销组件进行改造的,由于背景使用的图片,目前只支持 6 个奖品,一般情况下的大转盘都是这个规格. 转盘停止:之前使用的是计算角度来完成的,没有那种缓慢停止的动画.现在加了一 ...
支付宝小程序 | 上传图片组件（添加默认样式以及自定义上传样式）
使用my.uploadFile. my.chooseImage 的方式实现图片上传注意: 使用该方式上传文件,后端也需要参照官方文档进行修改 https://opendocs.alipay.com/ ...
uni-app跨端开发H5、微信小程序、支付宝小程序遇到的坑
文章目录微信支付宝小程序通用功能 1.checkbox样式 2.分享功能支付宝小程序参数微信小程序参数其他兼容问题 H5 微信小程序支付宝小程序持续更新中... 微信支付宝小程序通用功能 ...
uniapp 支付宝小程序手机号登陆
开发支付宝小程序,在登录的时候,由于需要手机号登陆,所以需要在支付宝小程序后台去申请手机号登陆权限. 支付宝小程序登陆组件设置  < ...
微信小程序和支付宝小程序对应的差异
记录将微信小程序代码挪到支付宝小程序的过程中遇到的一些支付宝小程序和微信小程序的差异,以免每次都去官方文档查. 1.文件后缀名微信小程序的四个文件后缀为.js..json..wxml..wxss,支 ...
支付宝小程序组件库开发之手写板组件
此组件主要用于小程序内签字手写功能,可显示缩小版,全屏版两种类型,三种笔画颜色可选择,手写完成可获取手写结果. 点击"重写",会清空手写板内容: 点击"完成", ...
支付宝小程序组件库开发之省市区三级地址选择器组件
支付宝小程序开发文档中并没有提供明确的省市区选择器,不少项目还是有地址的填写需求,根据支付宝小程序现有提供的组件以及api,完全是可以实现填写地址的需求,比如分别获取省市区,通过地图来获取地址等,但是 ...
支付宝小程序组件库开发之自定义switch组件
支付宝小程序在官方文档上已经给出了switch组件,点击这里直达Switch,官方给出的示例是这样的: 结果实现出来是这样的: 卧槽,坑了,有点不爽,那就自己写一个吧,也不费多大的事,下面看效果: 这 ...

支付宝小程序camera组件取景框绘制

支付宝小程序camera组件取景框绘制相关推荐

最新文章

热门文章