前端水印-关键点

最新推荐文章于 2024-08-05 17:07:25 发布

unknown_zero

最新推荐文章于 2024-08-05 17:07:25 发布

阅读量73

点赞数

分类专栏：前端问题文章标签：前端 javascript

本文链接：https://blog.csdn.net/zkh110/article/details/129196902

版权

前端问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript结合HTML5的canvas元素生成水印，包括文字和图片水印，然后将水印作为背景图片应用到页面上。同时，通过MutationObserver监控DOM变化，确保水印的持久存在和正确显示。

摘要由CSDN通过智能技术生成

1、获取设备像素比

window.devicePixelRatio || 1

2、利用画布和2d绘制生成单个水印效果

const canvas = document.createELement('canvas')
const ctx = canvas.getContext('2d')

canvas.setAttribute('width', canvas_width)
canvas.setAttribute('height', canvas_height)

3、画布内绘制图片或者文字格式的水印

// 水印效果代码
// 偏移（translate）啊、旋转（rotate）啊，等等
// 建议将绘制的起点translate至画布中心点，对于旋转、偏移来说都是最好的位置

// 图片格式水印
const img = new Image()
img.onload = () => {
    ctx.drawImage(img, x, y, width, height)
}

img.crossOrigin = 'anonymous'
img.referrerPolicy = 'no-referrer'
img.src = image // image 图片路径


// 文字格式水印
ctx.font = '' // 建议使用等宽字体
ctx.textAlign = 'center' // 文字水平居中，建议使用center，位置好控制
ctx.textBaseline = 'middle' // 文字垂直居中
ctx.fillText(content, x, y)

// 如果多行需要自动换行可以使用 ctx.measureText计算宽度相应y值增加，实现自动换行

4、生成图片base64

const base64 = canvas.toDataURL()

5、设置遮罩div浮在页面最上方，并且背景图设置为生成的base64图片

const watermark = document.createElement('div')
div.style = `
    z-index: 1000;
    background-image: ${base64};
    background-repeat: repeat;
    background-size: ${canvas_width} ${canvas_height};
    pointer-events: 'none';
`

关键点设置 pointer-events: 'none'，设置元素对鼠标事件无响应，否则底下的页面无法点击

6、添加dom观察者，防止用户删除水印dom或者修改水印dom的属性

// 水印元素父节点观察者，观察水印子节点删除情况
// callback内判断是否水印节点被删除了，删除了的话重新创建一个
const observer = new MutationObserver(callback) 
observer.observe(parentDomNode, {
    attributes: false,
    childList: true,
    subtree: false
})


// 水印元素节点观察者，观察水印节点属性修改情况
/**
 * callback内判断是否水印节点属性有变化，可以直接将水印节点删除，
 * 触发父节点观察者的水印节点删除事件，重新创建一个
 */

const watermarkObserver = new MutationObserver(callback) 
watermarkObserver.observe(watermarkDomNode, {
    attributes: true,
    childList: false,
    subtree: false
})