Vue使用自定义指令实现页面底部加水印
程序员文章站
2022-06-18 19:10:38
项目场景给项目的整个背景加上自定义水印，可以改变水印的文案和字体颜色等实现思路 这里使用的技术主要是canvas,在实现水印的过程中，主要使用了canvas的特性 使用 canvas 特性...
项目场景
给项目的整个背景加上自定义水印，可以改变水印的文案和字体颜色等
实现思路
- 这里使用的技术主要是canvas,在实现水印的过程中，主要使用了canvas的特性
- 使用 canvas 特性生成 base64 格式的图片文件，然后设置其字体大小，颜色等
- 最后将其设置为背景图片，这就实现了页面的水印效果
实现效果
实现代码
watermarker.js文件如下：
到此这篇关于vue使用自定义指令实现页面底部加水印的文章就介绍到这了,更多相关vue 页面底部加水印内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！