dom-mark

Add text/HTML as watermark to DOM node

automatically calculate size and position
4kb mini library
support IE 9+ and all mobile browser
customizable HTML content and style
observe dom changes and rerender with MutationObserver

Demo

demo

Install

npm i @rotick/dom-mark -S

In browser, download dist/dom-mark.js to your project:

<script src="/path/to/dom-mark.js"></script>

Useage

import DomMark from '@rotick/dom-mark'
const domMark = new DomMark('body', {
  content: '水印', // html,text
  fontSize: 'inherit',
  fontFamily: 'inherit',
  color: 'inherit',
  opacity: .3,
  padding: 20,
  zIndex: 6000,
  minMargin: [40, 20],
  rotate: -15,
  observe: true
})
domMark.render()

update:

domMark.update({
  content: '<img src="/watermark.png" width="60" />'
})

important: if you want to use setInterval or setTimeout to update, don’t forget clearInterval or clearTimeout, otherwise maybe it will cause a crash(e.g. webpack HMR)

destroy:

domMark.destroy()

API

const dm = new DomMark(selector, options)
dm.render()
dm.update(options)
dm.destroy()

selector can be a HTMLElement object or document.querySelector’s parameter, default: body

options

option	type	default	introduction
content	String	-	HTML string or text
fontSize	String	inherit	font size, e.g. 16px,2rem
fontFamily	String	inherit	font family
color	String	inherit	font color
opacity	Number	.3	opacity of content, 0~1
padding	Number	20	the parent element padding, unit: px
zIndex	Number	6000	z-index of centent
minMargin	Array	[40, 20]	[vertical, horizontal], margin of item unit: px
rotate	Number	-15	rotation angle of item
observe	Boolean	true	observe the dom change and rerender, prevent user delete watermarks, work with `MutationObserver`, see caniuse

Change log

v1.1.0 2020/05/17

rerender when hot module reload, rerender only when watermark change in MutationObserver

Questions & Suggestions

Please open an issue here.

License

MIT