应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

如何在微信小程序中使用相机功能?

发布时间:2024-01-01 00:00 浏览次数:29

这就是很多开发者和用户都感兴趣的问题,因为相机功能对于很多小程序的场景就是必须的。比如,照片互动、读取二维码、摄制视频等。本文将为大家详尽了解如何在微信小程序中采用相机功能。


问题一:如何在小程序中关上相机?


小程序中可以通过wx.chooseImage、wx.chooseVideo等API调起原生的挑选图片、挑选视频等功能,但是轻易调用相机并偷拍或视频的API并不积极支持。因此,在小程序中关上相机须要通过调用小程序内的Canvas组件,设置Canvas的收录机、绘制有关内容去达至关上相机的效果。


解决方案:在小程序中采用Canvas组件关上相机


以下就是具体步骤:


1. 在小程序中嵌入Canvas组件


```xml


```


2. 初始化Canvas有关布局,设置相机收录机和绘制内容


```javascript


// 以获取canvas对象


let canvas = wx.createCanvasContext("camera", this);


// 设置canvas收录机


canvas.width = 300;


canvas.height = 400;


// 去除旧有内容


canvas.clearRect(0, 0, canvas.width, canvas.height);


// 绘制相机


canvas.drawImage("/images/camera.png", 0, 0, canvas.width, canvas.height);


```


3. 存取页面事件并调用wx.canvasToTempFilePath将Canvas转换成图片并展开留存


```javascript


// 监听canvas的页面事件


wx.canvasToTempFilePath({


canvasId: "camera",


x: 0,


y: 0,


width: this.data.canvasWidth,


height: this.data.canvasHeight,


success: (res) => {


// 将图片路径存储至本地


wx.saveImageToPhotosAlbum({


filePath: res.tempFilePath,


success: () => {


wx.showToast({


title: "留存顺利",


icon: "success",


duration: 2000


});


}


});


}


});


```


问题二:如何在小程序中展开偷拍和视频?


在关上相机后,如何展开偷拍和视频呢?必须同时实现这两个功能,须要分别存取对应按钮的页面事件,并在事件中通过Canvas绘制对应的界面,然后调用wx.canvasToTempFilePath谈Canvas转换成图片或视频展开留存。


解决方案:在Canvas绘制界面并调用wx.canvasToTempFilePath留存


以下就是具体步骤:


1. 页面偷拍按钮时,绘制偷拍时的界面并留存图片


```javascript


// 监听偷拍按钮页面事件


onTakePhotoTap() {


// 以获取canvas对象


let canvas = wx.createCanvasContext("camera", this);


// 绘制二者机界面


canvas.drawImage("/images/camera.png", 0, 0, canvas.width, canvas.height);


// 绘制偷拍界面


canvas.drawImage("/images/take-photo.png", 120, 340, 60, 60);


// 将canvas切换为图片并留存


wx.canvasToTempFilePath({


canvasId: "camera",


x: 0,


y: 0,


width: canvas.width,


height: canvas.height,


success: (res) => {


// 留存图片


wx.saveImageToPhotosAlbum({


filePath: res.tempFilePath,


success: () => {


wx.showToast({


title: "留存顺利",


icon: "success",


duration: 2000


});


}


});


}


});


}


```


2. 页面视频按钮时,绘制视频时的界面,并调用wx.startRecord已经开始演唱,wx.stopRecord完结演唱,并调用wx.saveVideoToPhotosAlbum留存视频


```javascript


// 监听视频按钮页面事件


onRecordVideoTap() {


// 以获取canvas对象


let canvas = wx.createCanvasContext("camera", this);


// 绘制二者机界面


canvas.drawImage("/images/camera.png", 0, 0, canvas.width, canvas.height);


// 绘制视频界面


canvas.drawImage("/images/record-video.png", 120, 340, 60, 60);


// 将canvas切换为图片并留存


wx.canvasToTempFilePath({


canvasId: "camera",


x: 0,


y: 0,


width: canvas.width,


height: canvas.height,


success: (res) => {


// 已经开始演唱


wx.startRecord({


success: () => {


wx.showToast({


title: "已经开始演唱",


icon: "none",


duration: 2000


});


}


});


this.setData({


isRecording: true,


tempFilePath: res.tempFilePath


});


}


});


},


// 暂停演唱


stopRecordVideo() {


wx.stopRecord({


success: (res) => {


let tempFilePath = this.data.tempFilePath;


// 去除倒计时


clearInterval(timer);


// 将canvas切换为图片并留存


wx.canvasToTempFilePath({


canvasId: "camera",


x: 0,


y: 0,


width: canvas.width,


height: canvas.height,


success: (res) => {


// 留存视频


wx.saveVideoToPhotosAlbum({


filePath: tempFilePath,


success: () => {


wx.showToast({


title: "留存顺利",


icon: "success",


duration: 2000


});


}


});


}


});


}


});


}


```


问题三:如何在小程序中以获取用户许可出访相机?


小程序中牵涉至相机、麦克风、边线等脆弱权限时,须要用户许可。如何在小程序中以获取用户许可出访相机呢?


解决方案:在小程序中采用wx.authorize


以下就是具体步骤:


1. 调用wx.authorize提出申请用户许可


```javascript


wx.authorize({


scope: "scope.camera",


success: () => {


// 用户已许可


},


fail: () => {


// 用户未许可


}


});


```


2. 在小程序中的app.json嵌入布局项"permission",以便在小程序启动时自动提出申请用户许可


```json


{


"permission": {


"scope.camera": {


"desc": "小程序须要许可您的相机"


}


}


}


```


问题四:如何在小程序中使用户剪裁照片?


有时,我们须要对用户摄制的照片展开剪裁,以便达至我们自己的市场需求。那么在小程序中如何使用户剪裁照片呢?


解决方案:在小程序中采用wx.getImageInfo以获取图片信息,然后采用wx.cropper展开图片剪裁


以下就是具体步骤:


1. 调用wx.chooseImage以获取照片路径


```javascript


wx.chooseImage({


success: (res) => {


let tempFilePaths = res.tempFilePaths;


// 图片路径取走data中


this.setData({


tempFilePaths: tempFilePaths


});


}


});


```


2. 在页面中嵌入wx-cropper组件


```xml


bind:sure="onSureCutImage" bind:cancel="onCancelCutImage">


```


3. 存取剪裁事件,在事件中将isShowCropper降为true,以表明剪裁侧边


```javascript


onCutImageTap() {


this.setData({


isShowCropper: true,


mode: "rectangle"


});


}


```


4. 在剪裁侧边中设置剪裁区域、剪裁比例、最小翻转值等参数


```javascript


// 剪裁模式


mode: "rectangle",


// 剪裁比例


ratio: 1,


// 最小翻转值


scaleMax: 4,


// 剪裁侧边宽度


clipWidth: 300,


// 剪裁侧边高度


clipHeight: 300,


// 起始纵向偏转


clipPosX: 0,


// 起始横向偏转


clipPosY: 0,


// 与否可以拖曳剪裁侧边


canDragClip: true,


// 与否可以翻转剪裁侧边


canScaleClip: true,


// 与否可以拖曳图片


canDragImg: true,


// 与否可以翻转图片


canScaleImg: true,


// 与否可以转动图片


canRotateImg: true,


// 转动角度


rotate: 0,


```


5. 当用户顺利完成剪裁操作方式后,将剪裁后的图片路径取走data中,并暗藏剪裁侧边


```javascript


onSureCutImage(e) {


let { tempFilePaths } = this.data;


let src = e.detail.path;


// 剪裁后的图片路径取走data中


this.setData({


tempFilePaths: [src],


isShowCropper: false


});


},


```


至此,我们已经学会了如何在微信小程序中采用相机功能,以及如何同时实现偷拍、视频、剪裁等操作方式。坚信通过本文的自学,读者已经对小程序相机功能的同时实现存有了更深入细致的介绍。

TAG标签:
阅读推荐