A watermark component that cannot be deleted complete source: github.com/wstreet/wat… Check the effects: wstreet. VIP Canvas learning: www.yuque.com/streetex/fb…
Installation
# use npm
npm install @wstreet7/watermark --save
# or use yarn
yarn add @wstreet7/watermark
# or script
<script src="https://unpkg.com/@wstreet7/watermark@latest/lib/watermark.min.js"></script>
Copy the code
Usage
Simple Example
import WaterMark from '@wstreet7/watermark';
const config = {
text: '@wstreet7'.
height: 60,
width: 100
}
const waterMark = new WaterMark(config)
Copy the code
Config
| field | describe | The default value |
|---|---|---|
| id | Id of the container | water-mark |
| height | Height of each repeat unit | 100 |
| width | Width for each repeat unit | 150 |
| font | Font size and font family must be included | 10px sans-serif Other configuration |
| rotate | Text tilt Angle | -30 (Canvas is rotating clockwise) www.yuque.com/streetex/fb… |
| fillStyle | Text color | #ccc |
| opacity | transparency | 1.0 |
| zIndex | z-index | 9999 |
Implementation approach
2. Monitor whether the DOM watermark is deleted or modified. If so, perform the first step to generate the Canvas and convert it into a picture. Need to listen to the watermark DOM and body: Listen to the body childList. If the watermark is deleted, add the attributes to the watermark
const MutationObserver = window.MutationObserver
|| window.WebKitMutationObserver
|| window.MozMutationObserver;
class WaterMark {
defaultOpts = {
id: 'water-mark'.
height: 100.
width: 150.
font: '10px sans-serif'.
rotate: - 30.
fillStyle: '#ccc'.
opacity: 1.0.
text: ' '.
zIndex: 9999
}
constructor(options) {
this._cfg = {... this.defaultOpts, ... options}
this.createObserver()
this.createCanvas()
this.load()
}
set(key, value) {
this._cfg[key] = value
}
get(key) {
return this._cfg[key]
}
createObserver() {
this.createDomObserver()
this.createBodyObserver()
}
// The watermark carrier div
createDomObserver() {
this.observer = new MutationObserver((a)= > {
this.remove()
});
}
createBodyObserver() {
this.bodyObserver = new MutationObserver((mutationList) = > {
if (
mutationList[0].removedNodes.length &&
mutationList[0].removedNodes[0].id === this.get('id')
) {
this.load()
}
});
}
createCanvas() {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const height = this.get('height')
const width = this.get('width')
canvas.height = height
canvas.width = width
const font = this.get('font')
const text = this.get('text')
const rotate = this.get('rotate')
const fillStyle = this.get('fillStyle')
const opacity = this.get('opacity')
ctx.fillStyle = fillStyle
ctx.font = font;
ctx.globalAlpha = opacity;
ctx.rotate(rotate / Math.PI * 2)
ctx.translate(0, height / 2)
ctx.fillText(text, 0, height / 2 )
this.set('canvas', canvas)
this.set('ctx', ctx)
}
observe() {
this.domObserve()
this.bodyObserve()
}
domObserve() {
const dom = this.get('dom');
this.observer.observe(dom, {
childList: true.
attributes: true.
characterData: true.
})
}
bodyObserve() {
const body = document.querySelector('body')
this.bodyObserver.observe(body, {
childList: true
})
}
remove() {
const body = document.querySelector('body')
const dom = this.get('dom')
body.removeChild(dom)
this.set('dom'.null)
}
load() {
const canvas = this.get('canvas')
const img = canvas.toDataURL('image/png'.1.0)
const body = document.querySelector('body')
const dom = document.createElement('div')
dom.setAttribute('id'.this.get('id'))
dom.setAttribute('style'.
`
background-image:url(${img});
height: 100%;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
pointer-events: none;
z-index: The ${this.get('zIndex')}
`
)
this.set('dom', dom)
body.appendChild(dom)
this.observe()
}
}
export default WaterMark
Copy the coderendering
