简介
Waterpark 是一个轻量级的前端水印插件，能够在图片和视频上添加文本水印，支持自定义水印位置、大小、颜色和透明度等功能。该插件基于 Canvas API 开发，兼容现代浏览器。
安装
使用 npm 安装：
npm install waterpark
使用方法
在项目中引入
在需要添加水印的页面中，使用 import 或 require 引入水印插件：
import WaterPark from 'waterpark';
// 或使用 require
// const WaterPark = require('waterpark');添加水印
创建 WaterPark 实例并调用 addWatermark() 方法添加水印，该方法接受一个 HTML 元素及其配置对象作为参数：
-- -------------------- ---- ------- ----- --------- - --- ------------ ----- ----- - ------------------------------- ----- ------- - - ----- ---------- ------ --------- --- ------ ------- -------- ---- -- ----------------------------- ---------
在视频上添加水印，可以针对视频元素添加 video 类名进行控制：
const videoEl = document.getElementById('video');
videoEl.classList.add('video');
waterMark.addWatermark('.video', options);配置选项
Waterpark 具有多个配置选项，以下为详细说明：
| 选项名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| text | string | '' | 水印文本 |
| fontSize | number | 16 | 水印文本大小 |
| color | string | '#000000' | 水印文本颜色 |
| opacity | number | 0.5 | 水印透明度 |
| position | string | 'right' | 水印位置，支持 left、center、right 和 top、bottom、middle 进行组合：'left top' |
| gap | object | {x: 10, y: 10} | 水印与目标元素之间的间隔 |
| rotate | number | -20 | 水印旋转角度，正数为顺时针旋转 |
| fontFamily | string | 'Arial' | 水印文本字体 |
| fontWeight | string | 'normal' | 水印文本粗细 |
示例代码
<!--HTML--> <img src="./image.png" alt="" id="img"> <video src="./video.mp4" id="video" controls></video>
-- -------------------- ---- ------- -- ---- ------ --------- ---- ------------ ----- --------- - --- ------------ -- ------ ----- ----- - ------------------------------- ----- ---------- - - ----- ------- --------- --- ------ ------- -------- ---- --------- ------- -------- -- ----------------------------- ------------ -- ------ ----- ------- - --------------------------------- ------------------------------- ----- ------------ - - ----- ------- --------- --- ------ ------- -------- ---- --------- ------ -------- -- -------------------------------- --------------
结语
Waterpark 是一个非常好用的前端水印插件，能够方便地为图片和视频添加水印，且可定制性高。开发人员可以根据具体项目需求进行调整使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e0fb81d47349e53cec