前端Vue页面加水印方法(带源码)

方案一

可能会报错,解决办法,下面网址

地址

tool.js

创建utils => tool.js

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();}
}

index.vue

可能会报错,解决办法,下面网址
https://blog.csdn.net/weixin_38711005/article/details/117069530<template><div class="content" :style="{backgroundImage:`url(${orgBackground})`}">aaa</div>
</template><script>
import tool from "@/utils/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);},// methods: {//     // 点击去除水印加这个去除方法//     remove () {//         this.orgBackground = null //     }// }
};
</script><style scoped>
.content {position: relative;width: 100%;height: 100vh;
}
</style>

效果

方案二

watermark.js

创建utils => watermark.js

let watermark = {}let setWatermark = (str) => {let id = '1.23452384164.123412416';if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id));}//创建一个画布let can = document.createElement('canvas');//设置画布的长宽can.width = 120;can.height = 120;let cans = can.getContext('2d');//旋转角度cans.rotate(-15 * Math.PI / 180);cans.font = '18px Vedana';//设置填充绘画的颜色、渐变或者模式cans.fillStyle = 'rgba(200, 200, 200, 0.40)';//设置文本内容的当前对齐方式cans.textAlign = 'left';//设置在绘制文本时使用的当前文本基线cans.textBaseline = 'Middle';//在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）cans.fillText(str, can.width / 8, can.height / 2);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(' + can.toDataURL('image/png') + ') left top repeat';document.body.appendChild(div);return id;
}// 该方法只允许调用一次
watermark.set = (str) => {let id = setWatermark(str);setInterval(() => {if (document.getElementById(id) === null) {id = setWatermark(str);}}, 500);window.onresize = () => {setWatermark(str);};
}export default watermark;

index.vue

<template><div>aaa</div>
</template>
<script>
import Watermark from '@/utils/watermark';  //路径不要写错export default {mounted: function () {Watermark.set("添加水印内容")}
}
</script>

效果

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

前端Vue页面加水印方法(带源码)相关推荐

电影购票系统（小小影院），SpringBoot+vue 结构启动项目（带源码，不收费）
文章目录功能简介部署须知可能遇到的错误部分运行截图参考文档功能简介 SpringBoot+SpringSecurity+MyBatis-Plus 框架的前后端电影项目,前端使用vue+el ...
python图片批量处理器批量加水印重命名源码
wx供重浩:创享日记对话框发送:python图片批处理免费获取完整源码源文件+说明文档+可执行文件等在PyCharm中运行<图片批量处理器>即可进入如图1所示的系统主界面.在该界面中 ...
vue插件瀑布流vue-masonry(带源码)
目录插件官网下载全局挂载 main.js中属性实例效果最后插件官网官网1 官网2 下载 npm install vue-masonry --save 全局挂载 main.js中 im ...
autojs-识图点击完整方法带源码及使用方法
单纯的click无法全适配游戏里不能用控件点击今天给大家带来识图点击的方法简单好用通杀所有分辨率首先是获取截屏权限 (识图点击必须获取截屏权限否则无法识图) if (!requestScree ...
使用ajax获取后台数据怎么打印,我用ajax获取后台数据并展示在前端页面的方法【源码】...
<我用ajax获取后台数据并展示在前端页面的方法[源码]>由会员分享,可在线阅读,更多相关<我用ajax获取后台数据并展示在前端页面的方法[源码](2页珍藏版)>请在人人文库网 ...
浅谈前端实现页面加载进度条以及 nprogress.js 的实现
以前在 Vue 的项目用了 nprogress 这个插件,一直对于其如何得知加载进度充满好奇,最近又看到了「前端如何实现页面加载进度条」这个问题,今天周六恰好一探究竟.以下仅为一家之言,如有异议,欢迎 ...
图片加水印怎么弄？这些图片加水印方法分享给你
相信很多小伙伴平常会喜欢将自己拍摄的作品上传到社交平台上与他人分享吧.然而有时会遇到自己辛苦拍摄的视频或者图片被他人盗用,甚至是获利的情况.其实想要避免自己的作品被他人盗用,我们可以在作品上面添加专属 ...
创意被盗用，这3个加水印方法，让照片刻上我们专属印记
一般我们为了保护自己的图片不被别人盗用,都会选择在图片上刻上专属印记.那么便是加水印方法,它包含两种:文字水印和图片水印.想知道怎么给图片添加水印吗?其实有很多种法子可以做到,下面就由我来分享这3个简 ...
Vue 页面加载闪现出现{{xxx}}问题
Vue 页面加载闪现出现{{xxx}}问题,猜测应该是犹豫网络延迟或者什么原因导致加载vue.js CSS中 [v-cloak] {display: none; } HTML中 <div v-c ...

前端Vue页面加水印方法(带源码)

目录

方案一

tool.js

index.vue

效果

方案二

watermark.js

index.vue

效果

最后

前端Vue页面加水印方法(带源码)相关推荐

最新文章

热门文章