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

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

问题一：如何在小程序中关上相机？

小程序中可以通过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

});

},

```

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