在本文 微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看
微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
代码封装是在上文添加的。
本文知识点：
1、微信小程序相机组件wx.createCameraContext()使用
2、微信小程序拍照，录视频实现
3、微信小程序上传文件接口wx.uploadFile()的使用
4、微信小程序wx:if的使用
5、nodejs上传文件multer模块的使用
6、camera组件使用
效果
image
在笔记本上，没有前后置翻转效果，真机上是有的；
在微信开发工具里camera组件是透明的，真机上没问题;
在微信开发工具里上传的视频格式为webm，真机上为mp4。
小程序代码
1、在utils下的wechat.js文件里添加代码
/**
* 将本地资源上传到开发者服务器，客户端发起一个 HTTPS POST 请求
* @param {string} url 开发者服务器 url
* @param {string} filePath 要上传文件资源的路径
* @param {string} name
* @param {object} formData HTTP 请求中其他额外的 form data
*/
static uploadFile(url, filePath, name, formData = { openid: "test" }) {
return new Promise((resolve, reject) => {
let opts = { url, filePath, name, formData, header: { 'Content-Type': "multipart/form-data" }, success: resolve, fail: reject };
wx.uploadFile(opts);
});
}
js
//index.js
//获取应用实例
let app = getApp();
let wechat = require("../../utils/wechat");
Page({
data: {
device: true,
tempImagePath: "", // 拍照的临时图片地址
tempThumbPath: "", // 录制视频的临时缩略图地址
tempVideoPath: "", // 录制视频的临时视频地址
camera: false,
ctx: {},
type: "takePhoto",
startRecord: false,
time: 0,
timeLoop: "",
},
onLoad() {
this.setData({
ctx: wx.createCameraContext()
})
},
// 切换相机前后置摄像头
devicePosition() {
this.setData({
device: !this.data.device,
})
console.log("当前相机摄像头为:", this.data.device ? "后置" : "前置");
},
camera() {
let { ctx, type, startRecord } = this.data;
// 拍照
if (type == "takePhoto") {
console.log("拍照");
ctx.takePhoto({
quality: "normal",
success: (res) => {
// console.log(res);
this.setData({
tempImagePath: res.tempImagePath,
camera: false,
});
wechat.uploadFile("https://xx.xxxxxx.cn/api/upload", res.tempImagePath, "upload")
.then(d => {
console.log(d);
})
.catch(e => {
console.log(e);
})
},
fail: (e) => {
console.log(e);
}
})
}
// 录视频
else if (type == "startRecord") {
if (!startRecord) {
console.log("开始录视频");
this.setData({
startRecord: true
});
// 30秒倒计时
let t1 = 0;
let timeLoop = setInterval(() => {
t1++;
this.setData({
time: t1,
})
// 最长录制30秒
if (t1 == 30) {
clearInterval(timeLoop);
this.stopRecord(ctx);
}
}, 1000);
this.setData({
timeLoop
})
// 开始录制
ctx.startRecord({
success: (res) => {
console.log(res);
},
fail: (e) => {
console.log(e);
}
})
}
else {
this.stopRecord(ctx);
}
}
},
// 停止录制
stopRecord(ctx) {
console.log("停止录视频");
clearInterval(this.data.timeLoop);
ctx.stopRecord({
success: (res) => {
this.setData({
tempThumbPath: res.tempThumbPath,
tempVideoPath: res.tempVideoPath,
camera: false,
startRecord: false,
time: 0
});
wechat.uploadFile("https://xx.xxxxxx.cn/api/upload", res.tempThumbPath, "tempThumbPath")
.then(d => {
console.log(d);
return wechat.uploadFile("https://xx.xxxxxx.cn/api/upload", res.tempVideoPath, "tempVideoPath")
})
.then(d => {
console.log(d);
})
.catch(e => {
console.log(e);
})
},
fail: (e) => {
console.log(e);
}
})
},
// 打开模拟的相机界面
open(e) {
let { type } = e.target.dataset;
console.log("开启相机准备", type == "takePhoto" ? "拍照" : "录视频");
this.setData({
camera: true,
type
})
},
// 关闭模拟的相机界面
close() {
console.log("关闭相机");
this.setData({
camera: false
})
}
})
html
<view class="view">
<view class="window">
<image class="cover-9" src="{{tempImagePath}}" bindtap="img" wx:if="{{type=='takePhoto'}}"></image>
<video class="cover-9" src="{{tempVideoPath}}" poster="{{tempThumbPath}}" wx:if="{{type=='startRecord'}}"></video>
<view class="window-2">
<button bindtap="open" type="primary" data-type="takePhoto">拍照</button>
<button bindtap="open" type="primary" data-type="startRecord">录制</button>
</view>
</view>
<camera class="camera" device-position="{{device?'back':'front'}}" wx:if="{{camera}}" flash="off">
<cover-view class="cover-1" bindtap="camera">
<cover-view class="cover-2">
<cover-view class="cover-5" wx:if="{{type=='startRecord'&&startRecord}}">{{time}}S</cover-view>
</cover-view>
</cover-view>
<cover-image class="cover-3" src="/images/xx2.png" style="width:60rpx;height:60rpx;" bindtap="close"></cover-image>
<cover-image class="cover-4" src="/images/zh.png" style="width:80rpx;height:60rpx;" bindtap="devicePosition"></cover-image>
</camera>
</view>
css
page{
height: 100%;
}
.view{
width: 100%;
height: 100%;
}
.window{
width: 100%;
height: 100%;
position: absolute;
}
.window-2{
display: flex;
flex-direction: row;
}
.camera{
width: 100%;
height: 100%;
}
.cover-1{
width: 150rpx;
height: 150rpx;
border-radius: 150rpx;
background-color: #dedcdc;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: absolute;
bottom: 60rpx;
left: 300rpx;
}
.cover-3{
position: absolute;
bottom: 105rpx;
left:135rpx;
}
.cover-9{
width: 728rpx;
height: 80%;
margin: 0 10rpx;
border:2rpx solid;
border-radius:5px;
}
button{
margin: 0 10rpx;
width: 100%;
}
.cover-4{
position: absolute;
top: 60rpx;
right:40rpx;
}
.cover-2{
width: 110rpx;
height: 110rpx;
border-radius: 110rpx;
background-color: #ffffff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color:#da2121;
font-size: 32rpx;
}
nodejs代码
文件上传使用multer模块，引入multer模块后配置好并添加一个上传处理的路由，创建上传的目录，
本文是uploads/tmp目录
const multer = require('multer');
let path = require("path");
//上传文件配置
const storage = multer.diskStorage({
//文件存储位置
destination: (req, file, cb) => {
cb(null, path.resolve(__dirname, '../uploads/tmp/'));
},
//文件名
filename: (req, file, cb) => {
cb(null, `${Date.now()}_${Math.ceil(Math.random() * 1000)}_multer.${file.originalname.split('.').pop()}`);
}
});
const uploadCfg = {
storage: storage,
limits: {
//上传文件的大小限制,单位bytes
fileSize: 1024 * 1024 * 20
}
};
router.post("/api/upload", async (req, res) => {
let upload = multer(uploadCfg).any();
upload(req, res, async (err) => {
if (err) {
res.json({ path: `//uploads/tmp/${uploadFile.filename}` });
console.log(err);
return;
};
console.log(req.files);
let uploadFile = req.files[0];
res.json({ path: `//uploads/tmp/${uploadFile.filename}` });
});
})
后端打印
image
上传的文件夹
image
素材
向下箭头：https://img-blog.csdn.net/20180226111545178
翻转图片：https://img-blog.csdn.net/20180226111559273
参考地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/camera.html
https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-camera.html
