JS结合Canvas制作水印添加器小工具

​​想了解更多关于开源的内容，请访问：​​,​​51CTO 开源基础软件社区​​,​​https://ost.51cto.com​​,随着搬运工的逐渐增加,原创作者的利益收到了极大的影响.所以给图片或视频加上水印显得极其重要,他可以有效的维护原创作者的版权防止盗版.本文分享一个由canvas和vue.js制作的图片水印添加器。,自定义水印的文字及颜色,水印的位置,旋转角度,大小,透明度,是否重复显示,以及选择为重复时可以选择文字之间的水平间距和垂直间距,在设置为合适的图片时点击下载按钮即可下载得到完成图.如果觉得效果不好也可以点击重置按钮瞬间清屏.同时还支持logo图水印。,整体思路如下：,下面先介绍一下项目中运行到的一些函数方法：,（1）绘制背景函数，先拿到页面中cavans元素,运用drawImage()画出背景。,（2） 绘制字体水印，同理先拿到canvas元素, 运用到的方法：,通过改变x,y将元素放置在画布各个位置，绘制logo水印同理。,（3）清屏函数：如果在绘制过程中，对绘制的效果不满意，想要重新绘制，就涉及到清屏操作，这里我是将输入的文字（inputval）和选中的水印（logo）设置为空再重新绘制, 代码如下：,（4）保存图片代码：绘制完成后就是保存图片代码,这里我是先创建了一个url元素用来存放下载的位置，文件名用new Date().getTime()+‘.png’ 这种形式来避免文件名重复，当我们下载完成之后创建的url并没有被释放，此时就需要使用 URL.revokeObjectURL()方法将内存释放掉，此处做了一个延迟，让url内存5秒后被释放。,（5）功能函数：使用这种方法创建元素可以节约资源避免浪费。,css代码如下:,初始界面:,点击按钮选择图片后:,​​https://gitee.com/touxing123/watermark-adder.git​​。,以上就是水印制作工具的全部过程了,最终效果跟上面一样,主要就是运用了canvas的一些属性,欢迎各位开发者一起研究讨论,希望本次分享对大家有所帮助。,​​想了解更多关于开源的内容，请访问：​​,​​51CTO 开源基础软件社区​​,​​https://ost.51cto.com​​。