写在前面，博主是个在北京打拼的码农，从事前端工作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('张健振      测试中');

}

效果展示：

后续跟进：11.7号发现bug 

水印背景图挂载到#app刷新页面消失了

有问题的是如果我们不是在app.vue文件里给app设置的水印背景图属性的话，当我们刷新页面水印就消失了，因为刷新的是整个vue实例，dom节点上的属性也会刷新，这个时候也会容易出现vuex数据丢失问题，怎么处理呢，跟解决vuex丢失一样，每次从接口取值后存入本地存储，在app.vue文件内判断本地存储内是否有水印参数，有就赋值给#app(最外层节点)。

文章传送门：

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

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