ez-watermark

A js watermark on any dom element. Written with ES6.Fortunately, with the help of rollup, it can be used in different ways, such as CommonJS and ES Module. Only 5KB in size, no other dependencies. Easy to use.

Demo

Click here

Browser Support

The following browsers have been tested and work:

11 ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Installing

Using npm:

npm install --save ez-watermark

Using CDN:

only support script tag method

<script src="https://unpkg.com/ez-watermark@1.0.0/dist/iife/ezwatermark.min.js"></script>

Usage

<sciprt> Tag

<script src="https://unpkg.com/ez-watermark@1.0.0/dist/iife/ezwatermark.min.js"></script>
<script>
  var el = document.body;
  var watermark = new Watermark(el, {
    text: "ez-watermark,00:01:6C:06:A6:29,192.168.8.1,2022-10-22 00:00:00",
    family: "宋体",
    size: 16,
    angle: -30
  });
  watermark.add();
	
  el.addEventListener("resize", function () {
    watermark.redraw();
  }, false);
</script>

ES MODULE

import Watermark from "ez-watermark";

var watermark = new Watermark(el, options);

...

CommonJS

var Watermark = require("ez-watermark");

var watermark = new Watermark(el, options);

...

Constructor Options

Key	Description	Default	Type
text	text used as a watermark, multi lines separate with ","	ez-watermark	String
lineSpace	lines height when multi lines situation, units: px	8	Number
size	font size of text, units: px	16	Number
family	font family of text	Times New Roman	String
color	font color of watermark, use HEX format	#CFCFCF	String
angle	angle of watermark	-30	Number
offsetX	distance in horizontal direction, units: px	120	Number
offsetY	distance in vertical direction, units: px	120	Number
opacity	the transsparency of watermark, the value between 0 and 1	0.5	Number
zIndex	the zIndex value of watermark	10001	Number

API

add watermark on dom element after creating watermark object

watermark.add();

remove watermark from dom element

watermark.remove();

Binding resize events on target dom element, and using resize() to resize watermark

el.addEventListener("resize", function () {
  watermark.resize();
}, false);

License

Copyright (c) 2022-present VN666

MIT (see LICENSE)