前言
一款智能水印相机,拍照自动添加时间、地点、经纬度等水印文字,可用于工作考勤、学习打卡、工作取证等,支持自定义内容以及给现有照片添加水印。无需安装,无需注册,即开即用。
原理
主要是通过canvas给图片上添加上时间水印地点信息。首先通过官方API(chooseLocation)获取到位置信息,然后利用JS获取本地时间,最后绘制到canvas上通过canvasToTempFilePath生成图片。
获取位置信息
这个接口在去年开始就需要用户手动申请,在小程序管理页面申请,如果申请按钮无法点击,在提交代码时会弹窗申请弹窗,之后就可以申请了。通过后才可以上线小程序。代码如下:
%ignore_pre_1%
其中qqmapsdk使用的是腾讯位置服务的sdk,需要去官方下载并申请key,然后再页面中加上如下代码:
%ignore_pre_2%
获取时间信息
时间信息就很简单了,这里给大家提供封装了一下,如下代码:
%ignore_pre_3%
绘制图片
这里说明一下,目前 wx.createCanvasContext接口以及弃用了,所以我们采用Canvas.getContext代替,首先我们需要添加canvas,在wxml页面中添加如下代码,一定要设置好宽高,可以是动态的,但是必须设定好,不然很容易出现画面模糊的问题。
%ignore_pre_4%
然后动态设置宽高可以根据相机或者图片的宽高自定设置,然后我们将时间、位置和图片等信息一起绘制在canvas上。
%ignore_pre_5%
这里直接用Promise封装了一下,方便调用。其中iamgeUrl为相机的照片或者用户自己上传的图片地址。
以上就是大致的流程,具体如何操作,可以看我开源的智能水印相机的代码: