CustomCamera
功能介绍 与 展示
- 小程序取景框内拍照
- 实时显示当前时间
- 显示当前经纬度
- 显示当前街道信息
- 可本地保存照片
代码实现
1、拍照功能
拍摄照片：
CameraContext.takePhoto(Object object)
相机授权请求：wx.authorize(Object object)
onShow: function () {
this.getLocation();
var that = this
wx.authorize({
scope: 'scope.camera',
success: function (res) {
that.setData({
isShowCamera: true,
})
},
fail: function (res) {
console.log("" + res);
wx.showModal({
title: '请求授权您的摄像头',
content: '如需正常使用此小程序功能，请您按确定并在设置页面授权用户信息',
confirmText: '确定',
success: res => {
if (res.confirm) {
wx.openSetting({
success: function (res) {
console.log('成功');
console.log(res);
if (res.authSetting['scope.camera']) {
//设置允许获取摄像头
console.log('设置允许获取摄像头')
wx.showToast({
title: '授权成功',
icon: 'success',
duration: 1000
})
that.setData({
isShowCamera: true,
})
} else {
//不允许
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
wx.navigateBack({
delta: 1
})
}
}
})
} else {
//取消
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
wx.navigateBack({
delta: 1
})
}
}
})
}
})
},
takePhoto: function() {
var that = this
that.ctx.takePhoto({
quality: 'high',
success: (res) => {
wx.setStorage({
key: 'originalImagePath',
data: res.tempImagePath,
})
wx.navigateTo({
url: 'upload?path=' + res.tempImagePath + '&char=0'
})
}
})
},
2、拍照后生成画布
获取系统信息来绘制画布（宽高等）：
wx.getSystemInfo(Object object)
获取图片信息：wx.getImageInfo(Object object)
创建 canvas 的绘图上下文 CanvasContext 对象：CanvasContext wx.createCanvasContext(string canvasId, Object this)
把当前画布指定区域的内容导出生成指定大小的图片：wx.canvasToTempFilePath(Object object, Object this)
getCanvas(path){
var that = this
wx.getSystemInfo({
success: function (res) {
var width = res.windowWidth
var height = res.windowHeight
var gap = 40
that.setData({
width: width,
height: height,
gap: gap
})
wx.getImageInfo({
src: that.path,
success: function (res) {
that.canvas = wx.createCanvasContext("image-canvas", that)
that.canvas.drawImage(that.path, 0, 0, that.data.width, that.data.height)
that.canvas.setFontSize(16);
that.canvas.setFillStyle('#fff');
that.canvas.fillText(that.data.currentTime, 50, 450)
that.canvas.setFontSize(16)
that.canvas.setFillStyle('#fff')
that.canvas.fillText('经度：'+ that.data.gps.longitude + ' 纬度：' + that.data.gps.latitude, 50, 475)
that.canvas.setFontSize(16)
that.canvas.setFillStyle('#fff')
that.canvas.fillText( that.data.district+ '附近', 50, 500)
wx.showLoading({
title: '数据处理中',
mask: true
})
that.canvas.setStrokeStyle('red')
// 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的
//过渡页面中，对裁剪框的设定
that.canvas.draw()
setTimeout(function () {
wx.canvasToTempFilePath({
//裁剪对参数
canvasId: "image-canvas",
x: that.data.gap, //画布x轴起点
y: that.data.gap, //画布y轴起点
width: that.data.width - 2 * that.data.gap, //画布宽度
height: 500, //画布高度
destWidth: that.data.width - 2 * that.data.gap, //输出图片宽度
destHeight: 500, //输出图片高度
canvasId: 'image-canvas',
success: function (res) {
that.filePath = res.tempFilePath
//清除画布上在该矩形区域内的内容。
that.canvas.clearRect(0, 0, that.data.width, that.data.height)
that.canvas.drawImage(that.filePath, that.data.gap, that.data.gap, that.data.width - that.data.gap * 2, 500)
that.canvas.draw()
wx.hideLoading()
//在此可进行网络请求
},
fail: function (e) {
wx.hideLoading()
wx.showToast({
title: '出错啦...',
icon: 'loading'
})
}
});
}, 1000);
}
})
}
})
},
3、获取当前时间
const moment = require("dayjs");
setInterval(function () {
const _currentTime = moment().format("YYYY年MM月DD日 HH:mm:ss", util.formatTime(new Date()).split(" ")[1]);
that.setData({
currentTime: _currentTime,
});
}, 1000)
4、获取位置信息
获取当前的地理位置、速度：
wx.getLocation(Object object)
let keys = 'SGXBZ-6X3K6-NYLSF-MALZD-QC6PK-BABOS';
getLocation() {
let that = this;
wx.getLocation({
type: "wgs84",
success(res) {
that.setData({
gps: {
latitude: res.latitude.toFixed(4),
longitude: res.longitude.toFixed(4),
},
});
that.getDistrict(res.latitude.toFixed(4), res.longitude.toFixed(4));
},
});
},
getDistrict(latitude, longitude) {
let that = this;
wx.request({
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${
latitude},${
longitude}&key=${
keys}`,
header: {
'Content-Type': 'application/json'
},
success: function (res) {
// 省
let province = res.data.result.address_component.province;
// 市
let city = res.data.result.address_component.city;
// 区
let district = res.data.result.address_component.district;
that.setData({
district: res.data.result.address,
region: [province, city, district]
})
}
})
},
5、图片保存
把当前画布指定区域的内容导出生成指定大小的图片：
wx.canvasToTempFilePath(Object object, Object this)
保存图片到系统相册：wx.saveImageToPhotosAlbum(Object object)
downImg() {
let that = this;
wx.canvasToTempFilePath({
canvasId: "image-canvas",
x: that.data.gap, //画布x轴起点
y: that.data.gap, //画布y轴起点
width: that.data.width - 2 * that.data.gap, //画布宽度
height: 500, //画布高度
destWidth: that.data.width - 2 * that.data.gap, //输出图片宽度
destHeight: 500, //输出图片高度
success: res => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(e) {
wx.showToast({
title: '保存成功',
icon: 'none',
duration: 2000
})
},
fail(e) {
wx.getSetting({
success(res) {
if (!res.authSetting["scope.writePhotosAlbum"]) {
wx.showModal({
title: '警告',
content: '请打开相册权限，否则无法保存图片到相册',
success(res) {
if (res.confirm) {
wx.openSetting({
success(res) {
console.log(res)
}
})
} else if (res.cancel) {
wx.showToast({
title: '取消授权',
icon: "none",
duration: 2000
})
}
}
})
}
}
})
}
})
},
fail: err => {
console.log(err)
}
})
},
写在最后
上面只展示了功能的部分核心代码，想要跑跑demo看效果的朋友可以去github上download哦，github地址：CustomCamera