| 【避坑指“难”】微信小程序自定义相机：自定义取景框、本地保存照片可分享、获取GPS定位 | 您所在的位置：网站首页 › 纸质取景框怎么做 › 【避坑指“难”】微信小程序自定义相机：自定义取景框、本地保存照片可分享、获取GPS定位 |
【避坑指“难”】微信小程序自定义相机：自定义取景框、本地保存照片可分享、获取GPS定位
|
CustomCamera
功能介绍 与 展示
小程序取景框内拍照实时显示当前时间显示当前经纬度显示当前街道信息
拍摄照片：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 |
【本文地址】
公司简介
联系我们