最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vue使用自定义指令实现页面底部加水印代码示例
时间:2022-06-29 02:23:46 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下Vue使用自定义指令实现页面底部加水印代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
项目场景
给项目的整个背景加上自定义水印,可以改变水印的文案和字体颜色等
实现思路
这里使用的技术主要是canvas,在实现水印的过程中,主要使用了canvas的特性
使用 canvas 特性生成 base64 格式的图片文件,然后设置其字体大小,颜色等
最后将其设置为背景图片,这就实现了页面的水印效果
实现效果
实现代码
测试问题啊测试问题啊测试问题啊测试问题啊测试问题啊测试问题啊
waterMarker.js文件如下:
function addWaterMarker(str, parentNode, font, textColor) { // 水印文字,父元素,字体,文字颜色 var can = document.createElement('canvas') parentNode.appendChild(can) can.can.can.style.display = 'none' var cans = can.getContext('2d') cans.rotate((-20 * Math.PI) / 180) cans.font = font || '16px Microsoft JhengHei' cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)' cans.textAlign = 'left' cans.textBaseline = 'Middle' cans.fillText(str, can.width / 10, can.height / 2) parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')' } const waterMarker = { bind: function (el, binding) { addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor) }, } export default waterMarker
相关文章
- 星际战甲自爆怪怎么打 05-01
- 梦幻西游修业点怎么交易 05-01
- 放置江湖经验怎么刷 05-01
- 光遇如何找到改变体型的药水 05-01
- 攻城掠地宝物属性怎么获得 05-01
- 崩坏星穹铁道折冲妙算唱片在哪折冲妙算唱片位置指引 05-01