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按需引入elementui组件(vue ElementUI实现异步加载树)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- vue考试链接重置(Vue实现答题功能)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- vue图片切换软件(Vue实现简单图片切换效果)
- vue定时器中间变颜色(Vue如何优雅的清除定时器)
- vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)
- vue端口号是什么原理(解决vue前后端端口不一致的问题)
- vue 访问后台接口(vue轮询请求解决方案的完整实例)
- vue 修改后刷新(Vue使用三种方法刷新页面)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- vuecli项目入门(vue-cli4.5.x快速搭建项目)
- vue基础语法对象(浅析从面向对象思维理解Vue组件)
- 郭麒麟(郭麒麟)
- 古人十句 戒骄 名言,醍醐灌顶,受益匪浅(古人十句戒骄名言)
- 《道德经》:功成不局,泰而不骄(道德经:功成不局)
- 每日一典 过江之鲫(每日一典过江之鲫)
- 红色代表什么(红色代表什么意义和象征)
- 菲律宾安全吗(菲律宾安全吗2023)
热门推荐
- 使用canvas画个正方形(canvas小画板之平滑曲线的实现)
- thinkphp5框架怎么设置(thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例)
- dockervolume迁移工具(Docker中数据卷volume管理的两种方式)
- linq to sql 中Concat、Union、Intersect、Except
- JS实现金额大小写转换
- 云主机和虚拟主机的区别(云主机有哪些虚拟化技术?)
- canvas两种绘图方法(canvas 基础之图像处理的使用)
- RegisterClientScriptBlock与RegisterStartupScript区别
- vue官网编辑器主题(vue实现主题切换的多种思路分享)
- virtualbox 创建步骤(virtualbox上安装OpenSuse的方法)