Cell Watermark

Create watermark for webpage and automatic adjust when window resize.

注意
本文最后更新于 2023-10-11,文中内容可能已过时。

Usage

1 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"
      })
    });

2 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

1 Watermark(options)

1.0.1 new Watermark(options)

1.0.1.1 Parameters
NameTypeDescription
optionsObjectThe options of watermark(Properties
1.0.1.1.1 Properties
NameTypeAttributesDefaultDescription
contentString<optional>watermark’s text
appendToString<optional>‘body’parent of watermark’s container
widthNumber<optional>150watermark’s width. unit: px
heightNumber<optional>20watermark’s height. unit: px
rowSpacingNumber<optional>60row spacing of watermarks. unit: px
colSpacingNumber<optional>30col spacing of watermarks. unit: px
rotateNumber<optional>15watermark’s tangent angle. unit: deg
opacityNumber<optional>0.1watermark’s transparency
fontSizeNumber<optional>0.85watermark’s fontSize. unit: rem
fontFamilyString<optional>‘inherit’watermark’s fontFamily

Author: Lruihao

1.1 Methods

1.1.1 upload(content)

Upload watermark’s text content

1.1.1.1 Parameters
NameTypeDescription
contentStringwatermark’s text

1.1.2 render(options)

Rerender watermark

1.1.2.1 Parameters
NameTypeDescription
optionsObjectThe options of watermark(Properties

1.1.3 destroy()

Force destroy watermark

相关内容

Buy me a coffee~
Lruihao 支付宝支付宝
Lruihao 微信微信
0%