#最新

开源原创智能水印相机微信小程序

前言

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

原理

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

获取位置信息

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

1. /**
2. * 获取地址信息
3. */
4. getLocation: function () {
5. wx.getLocation({
6. success: res => {
7. qqmapsdk.reverseGeocoder({
8. location: {
9. latitude: res.latitude,
10. longitude: res.longitude
11. },
12. success: res => {
13. let address = res.result.address;
14. this.setData({
15. address
16. })
17. }
18. })
19. }
20. })
21. },
23. /**
24. * 手动选择地点
25. */
26. chooseLocation: function () {
27. wx.chooseLocation({
28. success: res => {
29. console.log(res)
30. this.setData({
31. address: res.address
32. })
33. },
34. fail: err => {
35. console.log(err)
36. }
37. })
38. }

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

2. var QQMapWX = require(‘../../libs/qqmap-wx-jssdk.js’);
3. var qqmapsdk = new QQMapWX({
4. key: ” // 这里填写你的key
5. });

获取时间信息

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

2. export const formatTime = () => {
3. const date = new Date();
4. const year = date.getFullYear()
5. const month = date.getMonth() + 1
6. const day = date.getDate()
7. const weekDay = [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’][date.getDay()]
8. const hour = date.getHours()
9. const minute = date.getMinutes()
10. const second = date.getSeconds()
11. return {
12. date: [year, month, day].map(formatNumber).join(‘-‘),
13. time:[hour, minute, second].map(formatNumber).join(‘:’),
14. week: ‘星期’+weekDay
15. }
16. }
18. const formatNumber = (n) => {
19. const s = n.toString()
20. return s[1] ? s : ‘0’ + s
21. }

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

1. <canvas type=“2d” id=“canvas” style=“position: fixed; top: -10000px; left: -10000px; width: {{canvasWidth}}px;height: {{canvasHeight}}px;”></canvas>

然后动态设置宽高可以根据相机或者图片的宽高自定设置，然后我们将时间、位置和图片等信息一起绘制在canvas上。

2. /**
3. * 给图片添加水印
4. */
5. addWatermark: function (imageUrl) {
6. console.log(imageUrl)
7. return new Promise((resolve, reject) => {
8. wx.showLoading({
9. title: ‘图片生成中…’,
10. })
11. const query = wx.createSelectorQuery();
12. query.select(‘#canvas’).fields({
13. node: true,
14. size: true
15. }).exec((res) => {
16. console.log(res)
17. const canvas = res[0].node;
18. const ctx = canvas.getContext(‘2d’);
20. const dpr = wx.getSystemInfoSync().pixelRatio;
21. const {
22. canvasWidth,
23. canvasHeight
24. } = this.data;
25. canvas.width = canvasWidth * 1.5
26. canvas.height = canvasHeight * 1.5
27. ctx.scale(1.5, 1.5)
29. // 绘制背景图片
30. const image = canvas.createImage();
31. image.onload = () => {
32. ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
34. ctx.font = ‘normal 28px null’;
35. ctx.fillStyle = ‘#ffffff’;
36. ctx.textBaseline = ‘bottom’;
38. // 绘制地址
39. ctx.fillText(this.data.address, 20, canvasHeight – 20);
41. // 绘制时间
42. ctx.fillText(this.data.date + ‘ ‘ + this.data.time, 20, canvasHeight – 65);
44. // 绘制星期
45. ctx.fillText(this.data.week, 20, canvasHeight – 115);
48. wx.canvasToTempFilePath({
49. canvas,
50. success: (res) => {
51. wx.hideLoading()
52. resolve(res.tempFilePath);
53. },
54. fail: () => {
55. wx.hideLoading()
56. reject(new Error(‘转换为图片失败’));
57. }
58. });
59. }
60. image.src = imageUrl;
61. });
62. });
63. },

这里直接用Promise封装了一下，方便调用。其中iamgeUrl为相机的照片或者用户自己上传的图片地址。

以上就是大致的流程，具体如何操作，可以看我开源的智能水印相机的代码：