微信小程序实战：智能水印相机小程序开发附源码

2024-07-03 01:44| 来源: 网络整理| 查看: 265

前言

一款智能水印相机，拍照自动添加时间、地点、经纬度等水印文字，可用于工作考勤、学习打卡、工作取证等，支持自定义内容以及给现有照片添加水印。无需安装，无需注册，即开即用。

原理

主要是通过canvas给图片上添加上时间水印地点信息。首先通过官方API(chooseLocation)获取到位置信息，然后利用JS获取本地时间，最后绘制到canvas上通过canvasToTempFilePath生成图片。

获取位置信息

这个接口在去年开始就需要用户手动申请，在小程序管理页面申请，如果申请按钮无法点击，在提交代码时会弹窗申请弹窗，之后就可以申请了。通过后才可以上线小程序。代码如下：

/** * 获取地址信息 */ getLocation: function () { wx.getLocation({ success: res => { qqmapsdk.reverseGeocoder({ location: { latitude: res.latitude, longitude: res.longitude }, success: res => { let address = res.result.address; this.setData({ address }) } }) } }) }, /** * 手动选择地点 */ chooseLocation: function () { wx.chooseLocation({ success: res => { console.log(res) this.setData({ address: res.address }) }, fail: err => { console.log(err) } }) }

其中qqmapsdk使用的是腾讯位置服务的sdk，需要去官方下载并申请key，然后再页面中加上如下代码：

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); var qqmapsdk = new QQMapWX({ key: '' // 这里填写你的key }); 获取时间信息

时间信息就很简单了，这里给大家提供封装了一下，如下代码：

export const formatTime = () => { const date = new Date(); const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const weekDay = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()] const hour = date.getHours() const minute = date.getMinutes() const second = date.getSeconds() return { date: [year, month, day].map(formatNumber).join('-'), time:[hour, minute, second].map(formatNumber).join(':'), week: '星期'+weekDay } } const formatNumber = (n) => { const s = n.toString() return s[1] ? s : '0' + s } 绘制图片

这里说明一下，目前 wx.createCanvasContext接口以及弃用了，所以我们采用Canvas.getContext代替，首先我们需要添加canvas，在wxml页面中添加如下代码，一定要设置好宽高，可以是动态的，但是必须设定好，不然很容易出现画面模糊的问题。

【本文地址】

公司简介

联系我们