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

2024-09-01 301

前言

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

原理

主要是通过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. },
  22. /**
  23. * 手动选择地点
  24. */
  25. chooseLocation: function () {
  26. wx.chooseLocation({
  27. success: res => {
  28. console.log(res)
  29. this.setData({
  30. address: res.address
  31. })
  32. },
  33. fail: err => {
  34. console.log(err)
  35. }
  36. })
  37. }

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

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

获取时间信息

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

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

绘制图片
这里说明一下,目前 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上。

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

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

以上就是大致的流程,具体如何操作,可以看我开源的智能水印相机的代码:
开源原创智能水印相机微信小程序

评论解锁
当前隐藏内容需要评论才能查看
已有0人评论查看此内容
收藏 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

版权声明 1 零玖吧
2 https://www.09b.cn
3 QQ68857537
4
5 访
6
7

要想程序运行完整,离不开BUG的辅助

常见问题
  • 本站所有资源仅供学习交流使用请勿商业运营,严禁使用零玖吧上的资源从事违法,侵权等任何非法活动!
查看详情
  • 是的,开通之后所有资源都可以下载!
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

本次数据库查询:130次 页面加载耗时0.866 秒