前端实现一个简单地水印

前端添加水印

font-end set watermark

当前文档适用于2.0.0及以上版本，之前版本不适用，使用时请安装2.0.0及以上版本

v2.1.2 修复水印移除失效问题（https://github.com/zifeifish/watermark-package/issues/3） v2.1.1 修复窗口缩放刷新后，水印大小不会自适应变化的问题

方式一：如果过你的页面足够简单，只是一个简单的html静态页面或者是你不想引入太多的package,那么你可以下载 watermark.umd.min.js 并将其导入到 HTML文件中，这样你就可以使用watermark的这个全局对象来加载水印:

(Download watermark.umd.min.js and include it in your HTML document, this will add a global object called watermark)

<script src="watermark.umd.min.js"></script> <script type="text/javascript"> watermark.setWaterMark( { w_texts: ['娃哈哈', '177****0000'], } ) </script>

方式二：安装npm包导入到需要使用的项目中去：

(Alternatively you can use a JavaScript package manager to add it to your project)

npm install watermark-package --save // import import watermark from 'watermark-package' 导入后就可以调用下面的方法

（After that you can call any of methods that are explained in the following）

使用时该方法时传入一个 options 配置对象, 配置对象主要有两个属性：w_texts、w_options。 w_texts：水印文案的数组集合可设置多行文案。 w_options：水印参数配置项，如字体大小、颜色等

You can use the watermark.setWaterMark method to set watermark. The value will automatically be escaped for you.

import watermark from 'watermark-package' // w_texts：水印文案数组集合 watermark.setWaterMark( { w_texts: ['娃哈哈', '177****0000'] } )

options 配置对象还有另一个属性 w_options水印参数配置： 用于设置水印的具体参数如宽度，大小等，各参数说明见下表

If you need more options, like setting the width, you can add an object with options as the last parameter:

import watermark from 'watermark-package' watermark.setWaterMark( { w_texts: ['娃哈哈', '177****0000'], w_options: { w_width: 240, w_height: 140, w_top: '0px', w_left: '0px', w_rotateDeg: 25, w_font: '1.2rem Vedana', w_color: '#666', w_opacity: '0.2', w_zIndex: '100000', } } );

清除水印

clear watermark

watermark.removeWatermark()