废话开篇：简单实现一个覆盖水印的小功能，水印一般都是添加在图片上，然后直接加载处理过的图片url即可，这里并没有修改图片，而是直接的在待添加水印的 dom 上添加一个 canvas 蒙版。
一、效果
处理之前
div
img
处理之后
div
img
这里添加 “水印”（其实并不是真正的水印） 到 div  的时候按钮点击事件并不会因为有蒙版遮挡而无法点击
二、js 代码
class watermark{ //水印文字 watertexts = [] //需要添加水印的dom集合 needaddwatertextelementids = null //保存添加水印的dom saveneedaddwatermarkelement = [] //初始化 constructor(watertexts,needaddwatertextelementids){ if(watertexts && watertexts.length != 0){ this.watertexts = watertexts } else { this.watertexts = ['水印文字哈哈哈哈','2022-12-08'] } this.needaddwatertextelementids = needaddwatertextelementids } //开始添加水印 startwatermark(){ const self = this if(this.needaddwatertextelementids){ this.needaddwatertextelementids.foreach((id)=>{ let el = document.getelementbyid(id) self.saveneedaddwatermarkelement.push(el) }) } else { this.saveneedaddwatermarkelement = array.from(document.getelementsbytagname('img')) } this.saveneedaddwatermarkelement.foreach((el)=>{ self.startwatermarktoelement(el) }) } //添加水印到到dom对象 startwatermarktoelement(el){ let nodename = el.nodename if(['img','img'].indexof(nodename) != -1){ //图片，需要加载完成进行操作 this.addwatermarktoimg(el) } else { //普通，直接添加 this.addwatermarktonormalele(el) } } //给图片添加水印 async addwatermarktoimg(img){ if(!img.complete){ await new promise((resolve)=>{ img.onload = resolve }) } this.addwatermarktonormalele(img) } //给普通dom对象添加水印 addwatermarktonormalele(el){ const self = this let canvas = document.createelement('canvas') canvas.width = el.width ? el.width : el.clientwidth canvas.height = el.height ? el.height : el.clientheight let ctx = canvas.getcontext('2d') let maxsize = math.max(canvas.height, canvas.width) let font = (maxsize / 25) ctx.font = font + 'px "微软雅黑"' ctx.fillstyle = "rgba(195,195,195,1)" ctx.textalign = "left" ctx.textbaseline = "top" ctx.save() let angle = -math.pi / 10.0 //进行平移，计算平移的参数 let translatex = (canvas.height) * math.tan(math.abs(angle)) let translatey = (canvas.width - translatex) * math.tan(math.abs(angle)) ctx.translate(-translatex / 2.0, translatey / 2.0) ctx.rotate(angle) //起始坐标 let x = 0 let y = 0 //一组文字之间间隔 let sepy = (font / 2.0) while(y < canvas.height){ //当前行的y值 let rowcurrentmaxy = 0 while(x < canvas.width){ let totlemaxx = 0 let currenty = 0 //绘制水印 this.watertexts.foreach((text,index)=>{ currenty += (index * (sepy + font)) let rect = self.drawwater(ctx,text,x,y + currenty) let currentmaxx = (rect.x + rect.width) totlemaxx = (currentmaxx > totlemaxx) ? currentmaxx: totlemaxx rowcurrentmaxy = currenty }) x = totlemaxx + 20 } //重置x，y值 x = 0 y += (rowcurrentmaxy + (sepy + font + (canvas.height / 5))) } ctx.restore() //添加canvas this.addcanvas(canvas,el) } //绘制水印 drawwater(ctx,text,x,y){ //绘制文字 ctx.filltext(text,x,y) //计算尺度 let textrect = ctx.measuretext(text) let width = textrect.width let height = textrect.height return {x,y,width,height} } //添加canvas到当前标签的父标签上 addcanvas(canvas,el){ //创建div(canvas需要依赖一个div进行位置设置) let wartermardiv = document.createelement('div') //关联水印dom对象 el.wartermark = wartermardiv //添加样式 this.resetcanvasposition(el) //添加水印 wartermardiv.appendchild(canvas) //添加到父标签 el.parentelement.insertbefore(wartermardiv,el) } //重新计算位置 resetcanvasposition(el){ if(el.wartermark){ //设置父标签的定位 el.parentelement.style.csstext = `position: relative;` //设施水印载体的定位 el.wartermark.style.csstext = 'position: absolute;top: 0px;left: 0px;pointer-events:none' } }}
用法
<div> <!-- 待加水印的img --> <img style="width: 100px;height: auto" src="" alt=""></div>let watermark = new watermark()watermark.startwatermark();
ctx.save() 与 ctx.restore() 其实在这里的作用不是很大，但还是添加上了，目的是保存添加水印前的上下文，跟结束绘制后恢复水印前的上下文，这样，这些斜体字只在这两行代码之间生效，下面如果再绘制其他，那么，将不受影响。
防止蒙版水印遮挡底层按钮或其他事件，需要添加 pointer-events:none 属性到蒙版标签上。
添加水印的标签外需要添加一个 父标签 ，这个 父标签 的作用就是添加约束 蒙版canvas 的位置，这里想通过 mutationobserver 观察 body 的变化来进行更新 蒙版canvas 的位置，这个尝试失败了，因为复杂的布局只要变动会都在这个回调里触发。因此，直接在添加水印的标签外需要添加一个 父标签 ，用这个 父标签 来自动约束 蒙版canvas 的位置。
mutationobserver 逻辑如下，在监听回调里可以及时修改布局或者其他操作（暂时放弃）。
var mutationobserver = window.mutationobserver || window.webkitmutationobserver || window.mozmutationobserver;var mutationobserver = new mutationobserver(function (mutations) { //修改水印位置})mutationobserver.observe(document.getelementsbytagname('body')[0], { childlist: true, // 子节点的变动（新增、删除或者更改） attributes: true, // 属性的变动 characterdata: true, // 节点内容或节点文本的变动 subtree: true // 是否将观察器应用于该节点的所有后代节点})
图片的大小只有在加载完成之后才能确定，所以，对于 img 的操作，需要观察它的 complete 事件。
三、总结与思考
用 canvas ctx.drawimage(img, 0, 0) 进行绘制，再将 canvas.todataurl('image/png') 生成的 url 加载到之前的图片上，也是一种方式，但是，有时候会因为图片的原因导致最后的合成图片的 base64 数据是空，所以，直接增加一个蒙版，本身只是为了显示，并不是要生成真正的合成图片。实现了简单的伪水印，没有特别复杂的代码，代码拙劣，大神勿笑[抱拳][抱拳][抱拳]
推荐学习：《javascript视频教程》
以上就是详解如何用js实现覆盖水印效果的详细内容。