Cell Watermark
Create watermark for webpage and automatic adjust when window resize.
Jian YE目录
警告
本文最后更新于 2023-07-07，文中内容可能已过时。
Usage
Browser
Clone source
1git clone git@github.com:Lruihao/watermark.gitLoad
Watermark1 2 3 4 5<script type="text/javascript" src="./src/watermark.js"></script> <script type="text/javascript" src="./src/watermark.min.js"></script> <!-- Or CDN --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cell-watermark@1.0.3/src/watermark.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cell-watermark@1.0.3/src/watermark.min.js"></script>Initialization
1 2 3 4 5document.addEventListener('DOMContentLoaded', function () { new Watermark({ content: "cell-watermark" }) });
NPM
Install
1npm i cell-watermarkImport
1 2 3import Watermark from 'cell-watermark' /* Or */ var Watermark = require("cell-watermark")
Class: Watermark
Watermark(options)
new Watermark(options)
Parameters:
| Name | Type | Description |
|---|---|---|
| options | Object | The options of watermark（Properties） |
Properties:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
| content | String | <optional> | watermark’s text | |
| appendTo | String | <optional> | ‘body’ | parent of watermark’s container |
| width | Number | <optional> | 150 | watermark’s width. unit: px |
| height | Number | <optional> | 20 | watermark’s height. unit: px |
| rowSpacing | Number | <optional> | 60 | row spacing of watermarks. unit: px |
| colSpacing | Number | <optional> | 30 | col spacing of watermarks. unit: px |
| rotate | Number | <optional> | 15 | watermark’s tangent angle. unit: deg |
| opacity | Number | <optional> | 0.1 | watermark’s transparency |
| fontSize | Number | <optional> | 0.85 | watermark’s fontSize. unit: rem |
| fontFamily | String | <optional> | ‘inherit’ | watermark’s fontFamily |
Author: Lruihao
Methods
upload(content)
Upload watermark’s text content
Parameters:
| Name | Type | Description |
|---|---|---|
| content | String | watermark’s text |
render(options)
Rerender watermark
Parameters:
| Name | Type | Description |
|---|---|---|
| options | Object | The options of watermark（Properties） |
destroy()
Force destroy watermark
Buy me a coffee~
支付宝
微信