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

相关推荐
mCell44 分钟前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip44 分钟前
Node.js 子进程:child_process
前端·javascript
excel4 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel5 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼6 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping6 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙7 小时前
[译] Composition in CSS
前端·css
白水清风7 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix8 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278008 小时前
new、原型和原型链浅析
前端·javascript