Vue如何给页面加水印（超简单）

给页面加上水印

用canvas画一张背景图

export default {//tool.jsaddWaterMark() {const strArr = `${localStorage.getItem("loginUserName")}${localStorage.getItem("logunUserPhone").slice(7, 11)}[${new Date()}]`;let ctx = document.createElement("canvas");ctx.width = 250;ctx.height = 100;ctx.style.display = "none";let cans = ctx.getContext("2d");cans.rotate((-20 * Math.PI) / 180);cans.font = "12px Microsoft YaHei";cans.fillStyle = "rgba(17, 17, 17, 0.20)";cans.textAlign = "left";cans.textBaseline = "Middle";cans.fillText(strArr, 0, 100);cans.save();return ctx.toDataURL();}
}

需要添加的页面引入

<template><div class="content" :style="{backgroundImage:`url(${orgBackground})`}">123</div>
</template><script>
import tool from "../plus/tool";
export default {data() {return {orgBackground: "",};},name: "test",mounted() {localStorage.setItem("loginUserName", "ruan");localStorage.setItem("logunUserPhone", "123456");//实际只需要一行代码this.orgBackground = tool.addWaterMark();//监听dom属性改变重新生成水印(如果页面有变化需要去监听dom)// const org = document.querySelector(".content");// const options = {//     attributes: true,//     childList: true,//     subtree: true,// };// const observer = new MutationObserver((mutationList) => {// this.orgBackground = tool.addWaterMark();// });// observer.observe(org, options);},
};
</script><style lang='less' scoped>
.content {position: relative;width: 100vw;height: 100vh;
}
</style>
</script>

Vue如何给页面加水印（超简单）相关推荐

vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
图片加水印的简单方法
图片加水印的简单方法~许多小伙伴都习惯在需要对外发布的图片上添加水印,添加水印后就不必担心图片被盗用或被用于其它不良目的,给我们造成不好的影响.然而,许多用户不知道如何为图片添加水印,也不知道应该选择 ...
不会吧，不会吧，不会还有人不知道Python给图片加水印超级简单哦
不会吧,不会吧,不会还有人不知道❤️Python给图片加水印❤️超级简单哦文章目录不会吧,不会吧,不会还有人不知道❤️Python给图片加水印❤️超级简单哦介绍安装模块进行添加水印的操作结 ...
Vue项目提高页面加载速度的方法
1.路由懒加载路由懒加载简单来说就是访问到当前页面才会加载相关资源,提高页面加载速度. { path: '/login', name: 'login', component: resolce ...
问题排查：vue项目刷新页面加载了500多个请求？
问题背景某项目上线后,打开登录页加载了500多个请求,包含了js.css.png等等. 因为项目部署在第三方云平台,直接被当做恶意攻击,把IP封掉了如下图: 问题分析 Webpack 内置了 pr ...
给图片加水印的简单方法，手机图片加水印也可以用
当我们在网上发布图片时,如果图片上有水印,那别人就无法随意盗用了.所以给图片加水印已经是我们日常生活中必备的防伪手段之一了.那如何给图片加水印呢?今天我就给大家分享三个软件,有需要的朋友们可以一起来看 ...
前端Vue页面加水印方法(带源码)
目录方案一 tool.js index.vue 效果方案二 watermark.js index.vue 效果最后方案一可能会报错,解决办法,下面网址地址 tool.js 创建utils ...
在Java生成的html页面加水印,Java在Excel中添加水印的实现(单一水印、平铺水印)...
在Excel中没有直接添加水印的功能,但依旧可以通过一定方式来实现类似水印效果.本文通过Java程序代码介绍具体实现方法.可添加单一水印效果,即水印是以单个文本字样来呈现:也可添加多个平铺水印效果,即 ...
js页面加水印防复制防另存为代码(纯js)
这段代码是给前端页面添加水印的代码..何为水印?是可以显示登录人的姓名也可以定制一些内容等...代码如下: 前提是得引用下面两个js 可以去下载引入 <html> <head> ...

Vue如何给页面加水印（超简单）

给页面加上水印

Vue如何给页面加水印（超简单）相关推荐

最新文章

热门文章