Vue框架项目,给容器添加水印watermark

1、在@/utils下新增一个名为waterMark.js的脚本

具体水印样式可以在代码里自行调节style

参数 - 水印内容, 加水印的容器, 是否显示时间

let watermark = {};

function getCurrentDateTime() {
  const now = new Date();

  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");

  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");

  const dateTime = `${year}-${month}-${day}`;
  return dateTime;
}

const currentDateTime = getCurrentDateTime();
let setWatermark = (text, sourceBody, isShowTime) => {
  if (isShowTime) {
    let time = getCurrentDateTime();
    text = `${text}\n${time}`;
  }
  //   console.log("水印文本", text);
  let id =
    Math.random() * 10000 +
    "-" +
    Math.random() * 10000 +
    "/" +
    Math.random() * 10000;

  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id));
  }

  let can = document.createElement("canvas");
  can.width = 180;
  can.height = 75;

  let cans = can.getContext("2d");
  cans.rotate((-20 * Math.PI) / 180);
  cans.font = "15px Vedana";
  cans.fillStyle = "rgba(0, 0, 0, .5)";
  cans.textAlign = "left";
  cans.textBaseline = "Middle";
  //   let textLines = text.split("\n");
  //   textLines.forEach((line, index) => {
  //     cans.fillText(line, can.width / 20, can.height * (index + 1)); // 调整行高
  //   });
  cans.fillText(text, can.width / 20, can.height);

  let water_div = document.createElement("div");
  water_div.id = id;
  water_div.style.pointerEvents = "none";
  water_div.style.background =
    "url(" + can.toDataURL("image/png") + ") left top repeat";
  water_div.style.zIndex = "100000";
  water_div.style.whiteSpace = "pre";
  water_div.style.opacity = "0.5";
  if (sourceBody) {
    water_div.style.width = "100%";
    water_div.style.height = "100%";
    water_div.style.position = "absolute";
    water_div.style.top = "3px";
    water_div.style.left = "0px";
    sourceBody.appendChild(water_div);
  } else {
    water_div.style.top = "3px";
    water_div.style.left = "0px";
    water_div.style.position = "fixed";
    water_div.style.width = document.documentElement.clientWidth + "px";
    water_div.style.height = document.documentElement.clientHeight + "px";
    document.body.appendChild(water_div);
  }

  return id;
};

/**
 *  该方法只允许调用一次
 *  @param:
 *  @text == 水印内容
 *  @sourceBody == 水印添加在哪里,不传就是body
 *  @isShowTime == 是否显示时间
 * */
watermark.set = (text, sourceBody, isShowTime) => {
  let id = setWatermark(text, sourceBody, isShowTime);
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(text, sourceBody, isShowTime);
    }
  }, 1000);
  window.onresize = () => {
    setWatermark(text, sourceBody, isShowTime);
  };
};

export default watermark;

2、在main.js下进行全局注册

import watermark from '@/utils/waterMark.js'
Vue.prototype.$watermark = watermark

3、在vue组件中使用

<el-dialog :visible.sync="openFile">
    <div id="fileDialog" ref="fileDialog" style="height:100%;width:100%;"></div>
</el-dialog>
handleOpenDialog(){
    this.openFile = true; //打开对话框
    this.$nextTick(()=>{
        let nickName = "admin";
        // 参数 - 水印内容, 加水印的容器, 是否显示时间
        this.$watermark.set(nickName, this.$refs.fileDialog, true);
    })
}

4、效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/127706.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Flink之SQL查询操作

SQL查询 基本SELECT查询生成测试数据WITHWHEREDISTINCTORDER BYLIMIT 窗口函数概述创建数据表滚动窗口 TUMBLE滑动窗口 HOP累积窗口 CUMULATE窗口偏移 聚合窗口聚合分组聚合OVER聚合 TOP-N普通Top-N窗口Top-N 联结Join查询内部等连接外部等连接间隔联结 集合操作UNION 和 UNION…

界面控件DevExtreme图表和仪表(v23.1) - 新功能(Angular,React,Vue,jQuery)

本文将为大家总结下DevExtreme在v23.1版本中发布的一些与图表和仪表盘相关的功能。 DevExtreme拥有高性能的HTML5 / JavaScript小部件集合&#xff0c;使您可以利用现代Web开发堆栈&#xff08;包括React&#xff0c;Angular&#xff0c;ASP.NET Core&#xff0c;jQuery&#…

数据结构(c语言版) 队列

链队列 要求&#xff1a;实现链队列的创建、初始化、入队、出队 &#xff08;先进先出&#xff09; 代码 // // Created by My.cy on 2023/10/19. // //链队列 创建、初始化、入队、出队 先进先出#include <stdio.h> #include <malloc.h>//定义结构体 struct…

“探秘!根据关键词搜索商品列表的虾皮API大揭露!“

要使用虾皮API根据关键词获取商品列表&#xff0c;您需要使用虾皮API的搜索功能。以下是使用Python和虾皮API根据关键词获取商品列表的基本步骤&#xff1a; 注册虾皮API账号并获取API凭证&#xff08;访问虾皮开放平台并创建应用以获取API凭证&#xff09;。安装必要的Python…

SPRINGBOOT整合CXF发布WEB SERVICE和客户端调用(用户和密码验证)

主要分为客户端和服务端 服务端 pom配置 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.4.3</version><relativePath/> <!-- lookup parent fro…

使用电脑上自带的软件进行远程连接

使用电脑上自带的软件进行远程连接 首先需要让你远程的电脑设置成允许远程连接 Windows R打开运行面板&#xff0c;然后输入sysdm.cpl命令&#xff0c;如下图&#xff1a; 选择“远程”选项卡&#xff0c;确保选中“允许远程连接到这台计算机”&#xff0c;如下图&#xff1…

如何在 Vue.js 中引入原子设计?

前言 原子设计是一种创建设计系统的方法&#xff0c;它将用户界面分解为可重用的小组件&#xff0c;即&#xff1a; Atoms 原子Molecules 分子Organisms 生物体Templates 模板Pages 页面 通过遵循模块化设计方法&#xff0c;原子设计可帮助团队创建一致、可缩放且可维护的 …

阻容降压电阻应用

公式&#xff1a;Xc1/2πfC 电流&#xff1a;IU/Xc 举例&#xff1a;1uf金属化聚丙烯膜电容的容抗是3184欧姆。电流是70ma。 实际应用中根据工作电流去倒推算电容。

Ionic组件 ion-avatar ion-icon ion-img ion-thumbnail

1 ion-avatar Avatars 是通常包裹 image or icon的圆形组件。它们可以用来表示一个person or an object。 Avatars 可以自己使用&#xff0c;也可以在任何元素内部使用。如果放置在ion-chip or ion-item内部&#xff0c;avatar 将调整大小以适应父组件。要将avatar 定位在item…

Ceph文件存储

1、存储基础 //单机存储设备 ●DAS&#xff08;直接附加存储&#xff0c;是直接接到计算机的主板总线上去的存储&#xff09; IDE、SATA、SCSI、SAS、USB 接口的磁盘 所谓接口就是一种存储设备驱动下的磁盘设备&#xff0c;提供块级别的存储 ●NAS&#xff08;网络附加存储&…

酷安官网下载页前端自适应源码

酷安官网下载页前端自适应源码&#xff0c;自己拿走玩玩 站长只打开看了一眼&#xff0c;感觉风格还不错&#xff0c;纯html&#xff0c;自己魔改 转载自 https://www.qnziyw.cn/wysc/qdmb/24470.html

Python + UnitTest 软件测试流程总结

以测试用户登录流程为例&#xff1a; TestCase&#xff1a; TestCase 主要用来编写测试用例&#xff0c;这里结合 断言&#xff08;assertEqual 和 assertIn&#xff09; 进行判断&#xff0c;避免了手动书写判断。 # tools.py # 登录验证方法 def login(username, password…

Vue入门教学——编写第一个页面

以Vue2.0为例子。 1、创建一个Vue项目 创建过程&#xff1a;Vue-cli&#xff08;脚手架&#xff09;的创建_vue脚手架创建项目命令-CSDN博客【注】项目名不能有大写字母。创建完毕后&#xff0c;使用VSCode打开项目文件夹&#xff08;其他编辑器也行&#xff09;。 2、运行项…

浅析高校用电问题及智慧电力监管平台的构建

安科瑞 崔丽洁 摘 要&#xff1a;介绍了当前高校用电存在的问题&#xff0c;进行了原因分析&#xff0c;由此提出建立高校用电智慧监管平台。对高校用电智慧监管平台的构架进行设计&#xff0c;运用物联网技术&#xff0c;实现各回路实时自主控制&#xff0c;并细化管理权限&a…

50代码审计-PHP无框架项目SQL注入挖掘

代码设计分为有框架和无框架 挖掘技巧&#xff1a;随机挖掘&#xff0c;定点挖掘&#xff0c;批量挖掘&#xff08;用工具帮助扫描探针&#xff0c;推荐工具&#xff1a;fortify&#xff0c;seay系统&#xff09;。 1.教学计划&#xff1a; ---审计项目漏洞 Demo->审计思…

打印流详解

概述 作用&#xff1a;打印流可以实现方便、高效的打印数据到文件中去。 高效体现在用到了缓冲流&#xff1a; public PrintStream(OutputStream out, boolean autoFlush, Charset charset) {super(out);this.autoFlush autoFlush;this.charOut new OutputStreamWriter(thi…

ObjectMapper - 实现复杂类型对象反序列化(天坑!)

目录 一、复杂类型反序列化 1.1、背景 1.2、问题解决 一、复杂类型反序列化 1.1、背景 a&#xff09;例如有 AppResult 对象&#xff0c;如下&#xff1a; Data public class AppResult {private Integer code;private String msg;private Object data;} b&#xff09;App…

建设银行余额生成器,工商农业邮政招商中国模版,易语言画板+编辑框实现截图

今天闲着没事干用易语言画板快照命令开发了一个虚拟余额生成器&#xff0c;当然我加了水印&#xff0c;模版上面都加了水印的&#xff0c;仅仅提供娱乐的效果&#xff0c;做不了啥事&#xff0c;然后软件主要就是画板上面加入了固定的模版图&#xff0c;图片的话你可以自己网上…

【React入门实战】实现Todo代办

文章目录 效果功能-状态管理相关接口定义相关方法定义 UIinput输入框&#xff1a;回车添加todo标题列表列表项Main 总体代码 非常简单入门的react-todo练习&#xff0c;代码写的很小白。 效果 技术栈&#xff1a;react-typeScript 数据分为代办Todo和已办完Done&#xff0c;可…

西门子S7-1200PLC混合通信编程(ModbusTcp和UDP通信)

S7-1200PLC的MODBUS-TCP通信 西门子PLC ModbusTcp通信访问网关后从站(SCL语言轮询状态机)-CSDN博客文章浏览阅读305次。西门子PLC的ModbusTcp通信在专栏已有很多文章介绍,所不同的是每个项目的通信需求都略有不同,今天我们以访问网关后的三个从站数据来举例,给出轮询的推荐…