小程序中调用摄像头,实时获取当前画面信息,可用于扫描实物等场景

我们平时经常会遇到扫描扫码,扫描实物等类似场景,之前工作中遇到一个需求就是用户扫一扫获取当前物品、艺术品的相关信息,后来这块没有做,这几天不忙,刚好趁此机会写个demo,实现相关功能。

小程序可以使用uniapp或者微信原生来进行开发,其相关API非常类似。查阅相关文档发现小程序有个

uni.createCameraContext()

这个ApI可以创建并返回 camera 组件的上下文 cameraContext 对象。
在这里插入图片描述
利用这个API结合camera组件即可实现区域摄像头,在不需要用户收到触发的情况下实时获取当前画面信息,来做进一步处理。

代码如下:

<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera> 
methods: {
			takePhoto() {
				var that=this
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						console.log(res)
						that.src = res.tempImagePath  //获取到的画面信息
					}
				});
			},
			error(e) {
				console.log(e.detail);
			}
		}

我这里是写了个定时来实时获取,如果你有更好的方式,欢迎在评论区发表。

onLoad() {
			var that=this
			this.timer=setInterval(function(){
				that.takePhoto()
			},1000)
		},

到此结束。

  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在微信小程序调用摄像头拍照时,可以通过设置 `camera` 组件的 `resolution` 属性来控制摄像头画面的大小,该属性的值可以是一个对象,对象包含 `width` 和 `height` 两个属性,分别表示摄像头画面的宽度和高度。例如: ``` <camera binderror="onCameraError" mode="normal" resolution="{{resolution}}" bindstop="onCameraStop"></camera> ``` 其, `resolution` 可以在页面的 `data` 预先定义,如下所示: ``` data: { resolution: { width: 320, height: 240 } } ``` 此外,可以通过 `camera` 组件的 `takePhoto` 方法来触发拍照操作,该方法返回一个临时文件路径,表示拍摄的照片文件。在调用 `takePhoto` 方法之前,可以通过设置 `camera` 组件的 `quality` 属性来控制照片的质量,该属性的值为一个数字,范围为 0 到 1,表示照片的质量从低到高,例如: ``` <camera binderror="onCameraError" mode="normal" resolution="{{resolution}}" quality="{{quality}}" bindstop="onCameraStop"></camera> ``` 其, `quality` 可以在页面的 `data` 预先定义,如下所示: ``` data: { quality: 0.8 } ``` 在调用 `takePhoto` 方法时,可以在 `success` 回调函数获取到拍摄的照片文件路径,例如: ``` wx.createCameraContext().takePhoto({ quality: that.data.quality, success: function(res) { var tempImagePath = res.tempImagePath; // 对拍摄的照片进行处理 // ... } }); ``` 以上就是在微信小程序调用摄像头拍照时设置画面大小以及照片大小的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

.故友

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值