watermark - 标签 - 菠菜眾長https://lruihao.cn/tags/watermark/watermark - 标签 - 菠菜眾長Hugo -- gohugo.iozh-CN1024@lruihao.cn (Lruihao)1024@lruihao.cn (Lruihao)Sun, 23 May 2021 17:15:41 +0000Cell Watermarkhttps://lruihao.cn/projects/cell-watermark/Sun, 23 May 2021 17:15:41 +0000Lruihaohttps://lruihao.cn/projects/cell-watermark/Usage

Browser

  1. Clone source

    1

    git clone git@github.com:Lruihao/watermark.git

  2. Load Watermark

    1
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>

  3. Initialization

    1
2
3
4
5

    document.addEventListener('DOMContentLoaded', function () {
  new Watermark({
    content: "cell-watermark"
  })
});

NPM

  1. Install

    1

    npm i cell-watermark

  2. Import

    1
2
3

    import 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

]]>