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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。