npm 包 waterpark 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

Waterpark 是一个轻量级的前端水印插件，能够在图片和视频上添加文本水印，支持自定义水印位置、大小、颜色和透明度等功能。该插件基于 Canvas API 开发，兼容现代浏览器。

安装

使用 npm 安装：

npm install waterpark

使用方法

在项目中引入

在需要添加水印的页面中，使用 import 或 require 引入水印插件：

import WaterPark from 'waterpark';

// 或使用 require
// const WaterPark = require('waterpark');

添加水印

创建 WaterPark 实例并调用 addWatermark() 方法添加水印，该方法接受一个 HTML 元素及其配置对象作为参数：

const waterMark = new WaterPark();

const imgEl = document.getElementById('img');

const options = {
  text: 'watermark text',
  fontSize: 20,
  color: '#000',
  opacity: 0.3,
};

waterMark.addWatermark(imgEl, options);

在视频上添加水印，可以针对视频元素添加 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>

// 使用示例

import WaterPark from 'waterpark';

const waterMark = new WaterPark();

// 添加图片水印
const imgEl = document.getElementById('img');

const imgOptions = {
  text: 'Test',
  fontSize: 30,
  color: '#f90',
  opacity: 0.6,
  position: 'center middle',
};

waterMark.addWatermark(imgEl, imgOptions);

// 添加视频水印
const videoEl = document.getElementById('video');
videoEl.classList.add('video');

const videoOptions = {
  text: 'Test',
  fontSize: 30,
  color: '#f90',
  opacity: 0.6,
  position: 'right bottom',
};

waterMark.addWatermark('.video', videoOptions);

结语

Waterpark 是一个非常好用的前端水印插件，能够方便地为图片和视频添加水印，且可定制性高。开发人员可以根据具体项目需求进行调整使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e0fb81d47349e53cec