关于JS前端实现水印的代码操作_Javascript

网页水印

实现思路

通过canvas生成一张水印图片
通过css将图片设置为目标节点的背景图
通过mutationobserver监听目标节点的类名变化，防止水印被删除

代码操作

通过canvas生成一张水印图片

function createimgbase(options) {
  const { content, width, height } = options;
  const canvasdom = document.createelement("canvas");
  let ctx = canvasdom.getcontext("2d");
  canvasdom.width = width;
  canvasdom.height = height;
  if (ctx) {
    // 设置画笔的方向
    ctx.rotate((-14 * math.pi) / 180);
    // 设置水印样式
    ctx.fillstyle = "rgba(100,100,100,0.4)";
    ctx.font = "italic 20px arial";
    // 渲染水印
    content.foreach((text, index) => {
      ctx.filltext(text, 10, 30 * (index + 1)); // 纵向拉开30的间距
    });
  }
  // document.body.appendchild(canvasdom);
  // 将canvas转为图片
  return canvasdom.todataurl("image/png");
}

// createimgbase({
//   content: ["介四嘛呀", "介四sui印", "内部机密材料", "严禁外泄！"],
//   width: 200,
//   height: 200,
// });

将水印设置为目标节点的背景图片

function getwatermark({
  content,
  classname,
  canvasheight = 140,
  canvaswidth = 150,
}) {
  // 生成图片
  const data_url = createimgbase({
    content,
    width: canvaswidth,
    height: canvasheight,
  });
  // 通过设置伪元素样式，添加水印图片为背景图
  const defaultstyle = `
  .${classname} {
    position: relative;
  }
  .${classname}::after {
    content: "";
    background-image: url(${data_url});
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
  }`;

  const styledom = document.createelement("style");
  styledom.innerhtml = defaultstyle;
  document.head.appendchild(styledom);
}
// getwatermark({
//   content: ["介四嘛呀", "介四sui印", "内部机密材料", "严禁外泄！"],
//   classname: "content",
// });

添加mutationobserver监听节点的变化

function listenerdomchange(classname) {
  // 获取要监听的节点
  const targetnode = document.queryselector(`.${classname}`);
  // 创建监听器
  const observer = new mutationobserver(mutationlist => {
    // 遍历变化记录
    for (let mutationrecord of mutationlist) {
      // 如果目标节点的class属性发生变化，判断是不是类名被删了，是的话把类名加回去
      if (mutationrecord.attributename === "class") {
        if(!array.from(targetnode.classlist).includes(classname)) {
          targetnode.classlist.add(classname)
        }
      }
    }
  });
  // 启动监听
  observer.observe(targetnode, {
    attributes: true,
  });
}

function getwatermark({
      content,
      classname,
      canvasheight = 140,
      canvaswidth = 150,
}) {
  // 监听
  listenerdomchange(classname);
  const data_url = createimgbase({
    content,
    width: canvaswidth,
    height: canvasheight,
  });
  // ...
  const styledom = document.createelement("style");
  styledom.innerhtml = defaultstyle;
  document.head.appendchild(styledom);
}

关于mutationobserver

mutationobserver 用来监听dom的变化，dom的增删、dom属性的变化，子结点和文本内容的变化，都可以被监听。

mutationobserver 的监听和事件不同，事件是同步的，dom的变化会立即触发对应的事件，而 mutationobserver 是异步的，会在下一个微任务执行时触发监听回调。

创建mutationobserver

const observer = new mutationobserver((mutationslist, observer) => {
    // mutationslist mutationrecord数组 记录了dom的变化
    // observer mutationobserver的实例

    // 监听回调
    console.log(mutationslist, observer);
})

mutationobserver.observe(document.documentelement, {
  attributes: true,
  characterdata: true,
  childlist: true,
  subtree: true,
  attributeoldvalue: true,
  characterdataoldvalue: true
});

开启监听

// node 监听的节点
// config 监听配置(要监听哪些内容)
// observer.observe(node, config);
mutationobserver.observe(document.documentelement, {
  attributes: true,  // 属性变化
  attributeoldvalue: true,  // 观察attributes变动时，是否需要记录变动前的属性值
  attributefilter: [‘class',‘src']  // 需要观察的特定属性

  characterdata: true,  // 节点内容、文本的变化
  characterdataoldvalue: true,  // 观察characterdata变动时，是否需要记录变动前的属性值

  childlist: true,  // 子结点变化
  subtree: true,    // 所有后代节点
});

// 停止监听
mutationobserver.disconnect()

// 清除变动记录
mutationobserver.takerecords()

图片水印

实现思路

方案一：通过oss添加水印方案二：通过canvas生成带有水印的图片

oss实现

oss方式不做过多描述了简单来说就是通过在获取图片时，在图片链接上增加参数，让oss生成一张带水印的图片。注意点：

png图片的透明区域无法被添加水印。解决方式：可通过添加参数的方式，让oss将图片转为jpg格式（jpg格式会对透明区域做颜色填充）。
字体大小写为定值，原图大小会影响到水印字体的显示大小。解决方式：通过创建img标签，onload获取图片后，根据图片宽高计算合适的字体大小，然后再一次获取带水印的图片。
用户通过删除参数的方式可以删除水印解决方式：设置oss的安全级别，不带水印不可访问。

canvas实现

将img转为canvas

async function imgtocanvas(cav, imgsrc) {
  const img = new image();
  img.src = imgsrc;
  // 防止因跨域导致的图片加载失败(该方法有局限性)
  img.setattribute("crossorigin", "anonymous");
  // 等待图片加载
  await new promise(resolve => (img.onload = resolve));
  cav.width = img.width;
  cav.height = img.height;
  const ctx = cav.getcontext("2d");
  if (ctx) {
    ctx.drawimage(img, 0, 0);
  }
  return cav;
}

添加水印

function addwatermask(cav, content) {
  const ctx = cav.getcontext("2d");
  ctx.fillstyle = "rgba(100,100,100,0.2)";
  ctx.font = `24px serif`;
  ctx.translate(0, 0);
  ctx.rotate((5 * math.pi) / 180);
  // 生成水印
  let x = 0, y = 0;
  while (x < cav.width) {
    y = 0;
    while (y < cav.height) {
      ctx.filltext(content, x, y);
      y += 100;
    }
    x += 150;
  }
}

使用

(async function () {
  const canvas = document.createelement("canvas");
  await imgtocanvas(
    canvas,
    "https://pp.myapp.com/ma_pic2/0/shot_54360764_1_1716462139/0"
  );
  addwatermask(canvas, "介四sui印");
  // document.body.appendchild(canvas);
  return canvas.todataurl("image/png")
})();

到此这篇关于关于js前端实现水印的代码操作的文章就介绍到这了,更多相关js实现水印内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！