前端实现页面通过canvas添加全屏水印

写在前面,博主是个在北京打拼的码农,从事前端工作5年了,做过十多个大大小小不同类型的项目,最近心血来潮在这儿写点东西,欢迎大家多多指教。

  • 对于文章中出现的任何错误请大家批评指出,一定及时修改。
  • 有任何想要讨论和学习的问题可联系我:13287946835@139.com。
  • 发布文章的风格因专栏而异,均自成体系,不足之处请大家指正。

前端通过方法实现全部页面添加自定义文字的水印

本文关键字:水印、自定义、公共方法、随意添加文字

方法如下:
复制代码
	addWaterMarker(str){


				var can = document.createElement('canvas');
				var body = document.getElementById("app");
				
				body.appendChild(can);
				
				can.width=200;
				can.height=150;
				can.style.display='none';
				
				
				var cans = can.getContext('2d');
				cans.rotate(-20*Math.PI/180);
				cans.font = "16px Microsoft JhengHei";
				cans.fillStyle = "rgba(17, 17, 17, 0.30)";
				cans.textAlign = 'left';
				cans.textBaseline = 'Middle';
				cans.fillText(str,can.width/6,can.height/2);
				
				body.style.backgroundImage="url("+can.toDataURL("image/png")+")";
				
				},
测试使用:

mounted() {

this.addWaterMarker('张健振 测试中');

}

效果展示:

文章传送门:

vue的html2canvas使用解读,完美避免可能会造成的问题

dicom胶片展示,使用基石插件cornerstoneTools完成

相关推荐
鹿鹿学长12 分钟前
2025年全国大学生数学建模竞赛(C题) 建模解析|婴儿染色体数学建模|小鹿学长带队指引全代码文章与思路
c语言·开发语言·数学建模
zhousenshan20 分钟前
Python爬虫常用框架
开发语言·爬虫·python
excel26 分钟前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常1 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip1 小时前
JavaScript事件流
前端·javascript
小菜全1 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C1 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG1 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904271 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
DKPT1 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习