@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
}