给图片加文字水印(纯前端实现)

由于之前我的身份信息曾被人盗用过,被用来开过银行卡(还好是储蓄卡且没有什么影响),我现在在网上进行实名认证的时候,都会给证件照片打上水印再上传。

以前都是自己用 Photoshop 手动打水印,今天浏览微博的时候无意中看到@小众软件推了一个小工具,感觉这是一个办法。

不过打开后发现要把图片上传到服务器,然后加了水印再传回来。这感觉怎么这么奇怪呢?为了保护隐私先把隐私传到网上?
虽然作者明确说“本网站不会对用户身份证照片进行存储,请放心使用”并且代码已经开源,不过我还是不太放心,就想着自己写一个自己玩吧。
第一反应是用 Go 给搞一个。后来一想,这点功能应该纯前端就能实现吧?

我对前端其实很不熟悉,就在网上看有没有现成的能用的。结果是没有。不过最后找到一个别人写好的用 canvas 给图片加水印的一个demo
我就在这个的基础上修修改改了半天(我之前从未接触过canvas),最后就有了这个小工具

TODO:

  • 旋转角度
  • 间距
  • 透明度
  • 字体