前端实现页面通过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完成

相关推荐
Z_Xshan1 小时前
docker 容器web站点 中文文件名访问404问题
linux·开发语言·docker
菜鸟una1 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年1 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js2 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
kkkkk0211062 小时前
【Rust创作】Rust 错误处理:从 panic 到优雅控制
开发语言·算法·rust
代码改变世界100862 小时前
像素策略游戏:资源战争
css·游戏·css3
John.Lewis2 小时前
C++初阶(14)list
开发语言·c++·笔记
文火冰糖的硅基工坊2 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088502 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili2 小时前
用 Tinymce 打造智能写作
前端