vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
类别:编程学习 浏览量:1037
时间:2022-01-25 00:08:50 vue找不到水印设置
Vue使用自定义指令实现页面底部加水印项目场景给项目的整个背景加上自定义水印,可以改变水印的文案和字体颜色等
实现思路- 这里使用的技术主要是canvas,在实现水印的过程中,主要使用了canvas的特性
- 使用 canvas 特性生成 base64 格式的图片文件,然后设置其字体大小,颜色等
- 最后将其设置为背景图片,这就实现了页面的水印效果
实现效果
实现代码
<template> <li class="water-marker" > <li v-waterMarker="{text:'卡洛背心 - 版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"> <li class="water-marker-item">测试问题啊测试问题啊测试问题啊测试问题啊测试问题啊测试问题啊</li> </li> </li> </template> <script> import waterMarker from '../../directive/test/waterMarker' export default { directives: { waterMarker }, data(){ return{ } }, methods:{ } } </script> <style lang="scss"> .water-marker{ height: 300px; .water-marker-item{ line-height: 300px; } } </style>
waterMarker.js文件如下:
function addWaterMarker(str, parentNode, font, textColor) { // 水印文字,父元素,字体,文字颜色 var can = document.createElement('canvas') parentNode.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 = 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.jpg" alt="vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)" border="0" />
到此这篇关于Vue使用自定义指令实现页面底部加水印的文章就介绍到这了,更多相关Vue 页面底部加水印内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- springbootvue项目代码(Vue+SpringBoot实现支付宝沙箱支付的示例代码)
- vue 组件布局(Vue实现固定底部组件的示例)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- vue如何获取元素(vue第一次获取不到元素的解决方法记录)
- vueclass和style绑定(Vue中Class和Style实现v-bind绑定的几种用法)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- vue项目做过哪些打包优化(Vue项目优化的一些实战策略)
- vue的路由模式有几种(Vue 路由返回恢复页面状态的操作方法)
- vue项目打包上线的方法(vue项目打包以及优化的实现步骤)
- vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
- vue项目上线教程(vue项目中使用骨架屏的方法)
- vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)
- 乔欣古装女主戏获热度 作为女主,却没吃到红利(乔欣古装女主戏获热度)
- 爱情是什么(爱情是什么最经典的话)
- 乔欣 古装剧中的高颜值(古装剧中的高颜值)
- 怎么才可以财富自由(如何让自己实现财富自由)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
- 怎么快速学好英语(怎么快速学好英语初中)
热门推荐
- MongoDB的where查询
- html如何定义添加的图片的宽和高(为何img、input等内联元素可以设置宽高)
- sql server 过期激活(SQL Server评估期已过问题的解决方法)
- dedecms怎么设置下拉菜单(织梦DedeCMS实现 三级栏目_二级栏目_一级栏目_网站名称 的效果代码)
- jquery中animate
- 频繁变化字段如何建立索引(跳槽必备之你设计索引的原则是什么?怎么避免索引失效?)
- dedecms标签分类(Dedecms程序SEO常用的列表标签调用代码集合 dedecms优化)
- sqlserver 锁表原因(SQL Server学习笔记之事务、锁定、阻塞、死锁用法详解)
- .NET中dynamic和var的区别
- php 获取证书列表(用PHP做了一个领取优惠券活动的示例代码)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9