前言
hello大家好我是Jimmy，我搞了个小玩具，期待和大家一起交流进步。
废话少说，先看东西：
esay-watermark是一个基于canvas的简单的生成自定义水印的插件，轻量、灵活、配置简单是它的特点。
源码：esay-watermark 地址：gitee.com/jimmyxuexue…
事情是这样的
上周我还是按照日常的习惯上班刷着掘金，突然看到一篇文章介绍前端生成水印的方式，这个立马就提起了我的兴趣，因为如果我在开发中遇到这种情况，不用说第一时间肯定是百度现成的库，但是自己又有造轮子的心，想着干脆就自己造个轮子吧~
我的收获
这个库是用碎片的时间写下来的，虽然代码并不多，但是其实真正花费了四五天的时间，收获还是很大的，主要是通过这个库让我收获了：
-
对
webpack工程化有了更深入的了解这点很重要，知道了一个库的源码应该怎么通过webpack配置，怎么做一些简单的性能优化。
-
对TS的使用更加得心应手了。
-
知道了如何将自己的库上传至
npm，以供他人使用 -
了解了
canvas一些过去所没有接触过的API，如：获取文字的宽高尺寸。
实现原理
这个水印功能的实现是基于canvas来进行绘制的，也就是说文字其实是我们通过canvas来画上去，因为我们可以自定义文字的尺寸，方位，颜色，等等，最后通过将canvas转成一张base64格式的内容输出，就实现了这个水印的功能。
期待您的加入
这个库虽然是个玩具，但是如果有没有动手写过的同学来说，加入我一起完善它还是会有收获的。它也还有很多可以完善的地方，如：
- 现在只能支持一次绘制一个文字，将来可以绘制多个相同的文字
- 现在的文字也只能水平，水印最好的效果是倾斜的效果。
- 现在只能支持绝对的uri地址，并不支持相对路径的地址。
- ......
总之还是有很多的进步空间，希望有小伙伴能够一起加入进来，一起学习，一起进步。
致谢
感谢您观看到这里。希望有机会能和您一起交流心得。
\
