CustomCamera

功能介绍 与 展示

代码实现

1、拍照功能

拍摄照片：CameraContext.takePhoto(Object object)

相机授权请求：wx.authorize(Object object)

onShow: function () {this.getLocation();var that = thiswx.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 = thisthat.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 = thiswx.getSystemInfo({success: function (res) {var width = res.windowWidthvar height = res.windowHeightvar gap = 40that.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./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