vue水印怎么设置中间,vue水印怎么设置

  vue水印怎么设置中间,vue水印怎么设置

  本文主要实现了在整个项目背景中添加一个自定义水印,可以改变水印的拷贝和字体颜色。有一定的参考价值,感兴趣的朋友可以参考一下。

  

项目场景

  将自定义水印添加到项目的整个背景中,可以更改水印的副本和字体颜色。

  

实现思路

  这里用的技术主要是画布。在水印过程中,主要利用了画布的特性。

  使用canvas特性生成base64格式的图片文件,然后设置其字体大小、颜色等。

  最后设置为背景图片,实现了页面的水印效果。

  实现效果

  实现代码

  模板

  div class=水印

   div-Watermarker= { text: Carlo Vest-版权所有,textcolor: RGBA (180,180,180,0.4)}

  Div= water-marker-item 试题,试题,试题,试题,试题/div

  /div

  /div

  /模板

  脚本

  从导入水印././指令/测试/水印

  导出默认值{

  指令:{

  水印

  },

  data(){

  返回{

  }

  },

  方法:{

  }

  }

  /脚本

  样式lang=scss 。水位标志{

  高度:300px。水标记项目{

  行高:300像素;

  }

  }

  /风格

  waterMarker.js文件如下所示:

  函数addWaterMarker(str,parentNode,font,textColor) {

  //水印文本,父元素,字体,文本颜色

  var can=document . createelement( canvas )

  parentNode.appendChild(can)

  罐宽=200

  高度=150

  can.style.display=none

  var cans=can.getContext(2d )

  cans.rotate((-20 *数学。圆周率)/180)

  cans . font=font 16px Microsoft JhengHei

  cans . fill style=text color rgba(180,180,180,0.3)

  cans.textAlign=left

  cans.textBaseline=Middle

  cans.fillText(str,can.width/10,can.height/2)

  parent node . style . background image= URL( can . toda taurl( image/png ))

  }

  const waterMarker={

  bind:函数(el,binding) {

  addWaterMarker(binding . value . text,el,binding.value.font,binding.value.textColor)

  },

  }

  导出默认水印

  这就是这篇关于使用自定义指令在页面底部添加Vue水印的文章。有关Vue页面底部水印的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: