A library for watermasking web pages by canvas.
<script src="https://unpkg.com/watermask-lib@1.0.3/dist/watermask.min.js"></script>npm install watermask-lib --save
font
new WaterMask({
font: 'Baidu百度'
})image
new WaterMask({
image: 'xxx.png'
})Full options
new WaterMask({
font: "",
fontType: 'Microsoft YaHei',
size: 24,
container: container,
color: "#333",
alpha: 0.2,
rotate: 340,
scale: 1,
startX: 20,
startY: 20,
rows: 10,
cols: 10,
xGap: 200,
yGap: 100,
image: '',
repeat: true
})| Key | Type | Default | Description |
|---|---|---|---|
| container | object | document.querySelector("#watermask") | |
| font | string | Render font, required if image property is undefined | |
| fontType | string | Microsoft YaHei | |
| size | number | 24 | Fontsize |
| image | string | Render image, required if font property is undefined. Priorit to font property | |
| color | string | #333 | |
| alpha | number | 0.2 | Global canvas transparency |
| rotate | number | 340 | deg |
| scale | number | 1 | |
| repeat | boolean | true | Font or image will be repeat in x and y axis |
| startX | number | 20 | px, will be used only when repeat property is true |
| startY | number | 20 | px, will be used only when repeat property is true |
| rows | number | 10 | |
| cols | number | 10 | |
| xGap | number | 200 | px, will be used only when repeat property is true |
| yGap | number | 100 | px, will be used only when repeat property is true |