react网页添加水印(转)

复制代码
const watermark = ({
    // 使用 ES6 的函数默认值方式设置参数的默认取值
    // 具体参见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters
    container = document.body,
    width = '400px',
    height = '400px', 
    textAlign = 'left',
    textBaseline = 'bottom',
    font = '14px Microsoft Yahei',
    fillStyle = 'rgba(184, 184, 184, 0.4)',
    content = '',
    rotate = '24',
    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, 100, parseFloat(height) / 2) 
// ctx.fillText(content, 20, parseFloat(height) / 2) 

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
复制代码
watermark({
      content: projectTit+'-'+loginId+'-'+loginTime,
      container: document.querySelector('#watermark') 
    })
公司前几天有这个需求,亲测可用,谢谢大佬!
posted @   雪莉06  阅读(935)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
历史上的今天:
2018-11-12 EasyUI-panel 内嵌页面上的js无法被执行
点击右上角即可分享
微信分享提示