【sgWatermark.js】自定义组件:基于Vue2+html2canvas实现全局水印效果

sgWatermark.js源码

javascript 复制代码
import html2canvas from 'html2canvas'; // npm install --save html2canvas (官网:https://html2canvas.hertzen.com)
export default {
  addWatermark({
    container = document.body, // 水印添加到的容器
    innerHTML = "水印文字内容", // 水印文字的内容
    rotate = -30,//默认文字旋转角度
    cssText = `
      box-sizing: border-box;
      width: max-content;
      height: max-content;
      padding: 30px;
      font-size: 12px;
      font-family: 'Microsoft YaHei';
      color: #00000022;
      transform-origin:center;
      transform: rotate(-30deg);
      z-index: 999999;
      pointer-events: none;
      display: flex;
      justify-content: center;
      align-items: center;
    `,//水印模板文本的默认样式
    className = '__sgWatermark__',//水印类名
  } = {}) {
    let dom = document.createElement("div");
    dom.innerHTML = innerHTML;
    dom.style.cssText = cssText;//默认样式
    dom.style.transform = `rotate(${rotate}deg)`;//旋转角度
    container.appendChild(dom);//添加模板文本
    // ----------------------------------------
    html2canvas(dom, { backgroundColor: 'transparent', logging: false, }).then(canvas => {
      dom.parentNode.removeChild(dom);//移除模板文本
      let base64Url = canvas.toDataURL('image/png', 1.0);
      const __sgWatermark__ = document.querySelector(`.${className}`);
      const watermarkDiv = __sgWatermark__ || document.createElement("div");
      watermarkDiv.style.cssText = `transition: .618s ease;opacity: 0;position: fixed; top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; z-index: 999999999; background: url(${base64Url}); `;
      setTimeout(() => {
        watermarkDiv.style.opacity = 1;//缓慢出现
      }, 0);
      watermarkDiv.className = className;
      __sgWatermark__ || container.insertBefore(watermarkDiv, container.firstChild);
    });
  },
  removeWatermark(
    className = '__sgWatermark__',//水印类名
  ) {
    const dom = document.querySelector(`.${className}`);
    dom.parentNode.removeChild(dom);
  },
};

示例

html 复制代码
<template>
  <div :class="$options.name">
    <el-button type="primary" style="width: 300px; height: 100px">主要按钮</el-button>
    <div
      ref="div"
      style="
        width: 600px;
        height: 300px;
        background-color: #00000011;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      局部div
    </div>
  </div>
</template>
<script>
import sgWatermark from "@/js/sgWatermark";
export default {
  mounted() {
    // 示例1
    sgWatermark.addWatermark();
    // 示例2
    // sgWatermark.addWatermark({ container: this.$el, innerHTML: `高启强(No:201314)` });
    // 示例3
    // sgWatermark.addWatermark({ container: this.$refs.div, innerHTML: `<b style="color: #F56C6C88;font-weight: bold;font-size: 24px;" >你挚爱的强哥</b>` });
  },
};
</script>
相关推荐
泓博15 分钟前
Objective-c把字符解析成字典
开发语言·ios·objective-c
try2find18 分钟前
安装llama-cpp-python踩坑记
开发语言·python·llama
失落的多巴胺28 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear31 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息33 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
样子201838 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿39 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘39 分钟前
vue文本插值
javascript·vue.js·ecmascript
番茄小能手1 小时前
【全网唯一】C# 纯本地离线文字识别Windows版dll插件
开发语言·c#
梁诚斌1 小时前
使用OpenSSL接口读取pem编码格式文件中的证书
开发语言·c++