前端利用canvas给图片添加水印

本文发布于我的个人网站：http://wintc.top/article/27，转载请注明。

　　前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。

　　canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。

　　我们在上传文件到后端的时候，使用input标签读取用户本地文件后得到的其实是一个Blob对象（更精确的说是File对象，特殊的Blob对象）；而在页面上展示一个图片使用的是img标签；绘制功能用canvas实现。添加水印的功能需要在img标签、canvas画布、Blob对象这三者之间相互转换，通过一些API可以完成这个工作：

　　我们可以从本地读取图片Blob，然后渲染到im