@2080code/watermark

介绍

基于 CSS 的 background 给 HTML 元素添加 SVG 文字水印效果。

---

安装

npm install @2080code/watermark

或

<script src="lib/watermark.min.js"></script>

---

使用

import WaterMark from '@2080code/watermark'

// 创建实例
const Watermarker=new WaterMark({
    mode:'cover',
    content:'西游记',
    fontFamily:'Microsoft YaHei',
    fontSize:'60px',
    fontColor:'black',
    opacity:0.15,
    rotateDegree:-30,
    margin:0,
    padding:40,
    position:'center center',
})
// 绘制水印
Watermarker.draw({
    tuning:false,
    degraded:true,
})

---

参数

const Watermarker=new WaterMark(options)

参数	类型	默认值	说明
name	String	'2080code-watermark'	水印的名称，会影响 cover 模式下水印层元素的 className
carrierElem	HTMLElement	document.body	水印层载体。 需是可添加子元素的元素
zIndex	Number	1000000	水印层（css z-index）
mode	String （'mat'|'cover'）	'mat'	水印放置模式，默认 mat，铺设在目标层底部； cover 模式会创建一个层，并覆盖在载体上。 cover 模式下为确保水印覆盖到，请检查载体宽高，mat 模式下水印的打印是非强制的，可能丢失
content	String	''	水印文字内容，与 url 互斥，优先级高于 url
url	String	''	水印资源，与 content 互斥 暂时不支持margin、padding、rotateDegree及字体等相关设置项
fontFamily	String	'Hei'	字体名
fontWeight	String	'normal'	字体粗细
fontSize	String	'16px'	字体大小
fontColor	String	'black'	字体颜色
baseline	String	'hanging'	文本基线设置（svg text alignment-baseline）
rotateDegree	Number	0	旋转角度
size	String	'auto'	水印尺寸（css background-size）
margin	Number	0	水印之间的外间距
padding	Number	0	水印之间的内间距
needClip	Boolean	true	是否裁切掉水印内容之外的空白（margin、padding 除外），在设置 rotateDegree 时有效
position	String	'center center'	水印铺设位置（css background-position）
repeat	String	'repeat'	水印铺设方式（css background-repeat）
opacity	Number	0.1	透明度，同时影响水印及调试层
tuning	Boolean	false	调试模式开关，设为 true 会在水印下添加 canvas 画布生成的参照底图，能够观察到 margin、padding、rotateDegree、baseline 等参数的辅线，方便调试。 目前只支持在 cover 模式下开启
degraded	Boolean	false	降级处理，更好的兼容性，默认 false。 canvas 的 measureText 本身具有对文字更精确的捕获，但因为兼容性问题，低版本浏览器对它的特性支持不完全，只得以 HTML DOM 的 getComputedStyle 取代 canvas measureText 来完成基础绘制和尺寸的捕获。

---

方法

绘制水印

在声明实例后，调用 draw 方法即可绘制水印，options会继承实例的参数，但仍会保留在声明实例时设置的参数。 最佳实践是多个水印同屏时声明多个实例。

const Watermarker=new WaterMark({
    content:'西游释厄传'
})
Watermarker.draw({
    content:'西游记'
})

参数	类型	默认值	说明
options	WaterMarkTypes.WaterMarkOptions	{}	绘制选项，同创建实例时相同

获取水印dataURL

const Watermarker=new WaterMark({
    content:'吴承恩'
})
const dataURL=Watermarker.getDataURL()
console.log(dataURL)

---

效果

生产效果

{
    mode:'cover',
    content:'西游记',
    fontSize:'60px',
    rotateDegree:-30,
    padding:40,
    needClip:false
}

{
    mode:'cover',
    content:new Date().toLocaleString(),
    fontSize:'30px',
    opacity:0.25,
    padding:30,
    size:'40% auto',
    position:'top left',
    repeat:'no-repeat',
}

调试效果

{
    content:'西游释厄传',
    fontSize:'60px',
    rotateDegree:-30,
    margin:30,
    padding:40,
    tuning:true
}