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

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

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

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

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

TODO:

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