react 页面统一添加可换行水印

1.组件

const watermark = ({
  // 使用 ES6 的函数默认值方式设置参数的默认取值
  container = document.body,
  width = '250px',
  height = '160px',
  textAlign = 'left',
  textBaseline = 'bottom',
  font = '20px Microsoft Yahei',
  fillStyle = 'rgba(184, 184, 184, 0.4)',
  content = 'loading',
  content2 = 'time',
  rotate = '10',
  zIndex = 1000
} = {}, ...res) => {
const args = res
const canvas = document.createElement('canvas')

canvas.setAttribute('width', width)
canvas.setAttribute('height', height)
const ctx = canvas.getContext('2d')

ctx.textAlign = textAlign
ctx.textBaseline = textBaseline
ctx.font = font
ctx.fillStyle = fillStyle
ctx.rotate(Math.PI / 180 * rotate)
// ctx.fillText(content, 30, parseFloat(height) / 2)
ctx.fillText(content, 35, 15)
ctx.fillText(content2, 10, 40)
const base64Url = canvas.toDataURL()
const __wm = document.querySelector('.__wm')
const watermarkDiv = __wm || document.createElement('div')
const styleStr = `
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:${zIndex};
pointer-events:none;
background-repeat:repeat;
background-image:url('${base64Url}')`

watermarkDiv.setAttribute('style', styleStr)
watermarkDiv.classList.add('__wm')

if (!__wm) {
container.style.position = 'relative'
container.insertBefore(watermarkDiv, container.firstChild)
}

const MutationObserver = window.MutationObserver || window.WebKitMutationObserver
if (MutationObserver) {
let mo = new MutationObserver(function () {
const __wm = document.querySelector('.__wm')
console.log(__wm)
// 只在__wm元素变动才重新调用 __canvasWM
if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
// 避免一直触发
mo.disconnect()
mo = null
watermark(JSON.parse(JSON.stringify(args)))
}
})

mo.observe(container, {
attributes: true,
subtree: true,
childList: true
})
}

}

export default watermark

2.入口文件引入

import watermark from './utils/watermark'


watermark({
  content: ‘水印内容’,
  container: document.querySelector('#root')
})