vue页面加水印
Vue 页面 加水
2023-09-11 14:17:22 时间
addWaterMark() { let id = "1.23452384164.123412416"; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } const employeeId = getEmployeeId(); const strArr = `${employeeId.nickName}-${sys_endDate()}`; console.log(strArr); let ctx = document.createElement("canvas"); ctx.width = 300; ctx.height = 200; ctx.style.display = "none"; let cans = ctx.getContext("2d"); cans.rotate((-20 * Math.PI) / 180); cans.font = "16px Microsoft YaHei"; cans.fillStyle = "rgba(17, 17, 17, 0.15)"; cans.textAlign = "left"; cans.textBaseline = "Middle"; cans.fillText(strArr, 0, 100); cans.save(); let div = document.createElement("div"); div.id = id; div.style.pointerEvents = "none"; div.style.top = "30px"; div.style.left = "0px"; div.style.position = "fixed"; div.style.zIndex = "100000"; div.style.width = document.documentElement.clientWidth + "px"; div.style.height = document.documentElement.clientHeight + "px"; div.style.background = "url(" + ctx.toDataURL("image/png") + ") left top repeat"; document.body.appendChild(div); // return ctx.toDataURL(); },
相关文章
- 【Vue+element+admin】登陆页面篇(login.vue)
- 【Vue】通过replace取消router-link当前路由页面的历史回退记录
- Vue - Router 路由跳转传参(对象 / 数组)目标页面刷新后参数丢失问题解决方案
- Vue - 页面缓存(keep-alive)让容器滚动条回到原来的位置,保存用户浏览位置(从详情页返回列表时发现滚动条位置回到了最顶部,并没有停留在进入详情页之前)
- vue 跳转页面返回时tab状态有误的解决办法
- Vue源码探究-事件系统
- 如何用vue封装一个防用户删除的平铺页面的水印组件
- Nginx部署VUE前端页面(图文解说详细版)
- vue项目js和css文件名避免浏览器缓存再vue.config.js中配置
- 基于vue单页应用的例子
- VUE-015-解决 vue install 引发的 failed Error: not found: python2 问题
- vue项目实现图片重置功能
- vue学习笔记四:Jquery VS Vue之元素操作明细对照
- vue中$emit的用法,父子组件传值及页面跳转之间传值
- Django+Vue项目学习第六篇:vue+django发送post请求,设置不同content-type,前后端如何处理参数
- vue全局加水印(除登录页面)
- vue 将图片流转换为 base64 的图片 src
- Vue指令语法汇总
- vue生命周期的栗子