水印添加方式:1.新建 waterMark.js 内容如下

let watermarkOption = {}

let setWatermarkContent = (content) => {
let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
} let ele = document.createElement('canvas')
ele.width = 250
ele.height = 150 let getCanvas = ele.getContext('2d')
getCanvas.rotate(-20 * Math.PI / 180)
getCanvas.font = '20px Vedana'
getCanvas.fillStyle = 'rgba(200, 200, 200, 0.20)'
getCanvas.textAlign = 'center'
getCanvas.textBaseline = 'Middle'
getCanvas.fillText(content, ele.width / 3, ele.height / 2) let div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '0px' // 水印距离 上边的距离
div.style.left = '0px' // 水印距离 左边的距离
div.style.position = 'fixed'
div.style.zIndex = '100000'
div.style.width = document.documentElement.clientWidth - 100 + 'px' // 生成水印画布大小的宽度
div.style.height = document.documentElement.clientHeight - 100 + 'px' // 生成水印画布大小的高度
div.style.background = 'url(' + ele.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
return id
} // 该方法只允许调用一次
watermarkOption.set = (content) => {
let id = setWatermarkContent(content)
setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermarkContent(content)
}
}, 500)
window.onresize = () => {
setWatermarkContent(content)
}
} export default watermarkOption

2.在入口app引入

<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template> <script>
import waterMark from './untils/waterMark'
export default {
name: 'App',
data(){
return { }
},
mounted(){
// 你要的内容
waterMark.set("水印测试")
},
methods:{ }
}
</script> <style> </style>

vue网页添加水印的更多相关文章

  1. js vue 页面添加水印

    vue 微信页面添加水印 this.$nextTick(function() {                                   watermark({ watermark_txt ...

  2. vue 网页文字中带#的话题颜色高亮

    网页中显示文字时,带#开始和结束的文字蓝色高亮,就像微博话题一样效果如下 html <span v-html="parseComments('#吃货节#有什么好吃的')"&g ...

  3. 最新vue项目添加水印

    在utils文件夹中创建 wartermark.ts 文件(位置看自己的组件放那,这都行),内容如下: 1 "use strict"; 2 3 const setWatermark ...

  4. vue 页面添加水印 ts

    "use strict"; // tslint:disable-next-line: only-arrow-functions const setWatermark: (str: ...

  5. JS为网页添加文字水印【原创】

    最近需要实现为网页添加水印的功能,由于水印的信息是动态生成的,而百度谷歌上的方法往往都是为网页添加图片水印或为图片添加水印,而为网页添加文字水印相关资料较少,于是就自己动手写了这个代码. 通常加动态水 ...

  6. Vue全家桶(Vue-cli、Vue-route、vuex)

    摘要 学习本篇之前要具备一定的vue基础知识,可以先看一下Vue基础(环境配置.内部指令.全局API.选项.内置组件) 1.Vue-cli Vue-cli是vue官方出品的快速构建单页应用的脚手架,这 ...

  7. vue学习:vue+webpack的快速使用指南(新手向)

    一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...

  8. 另一个维度:cocos-2d VS vue

    最近再看cocos-2d的东西,期间得到了同事和老板的支持,在此感谢.之前一直在做vue网页,现在看游戏cocos-2d这块,刚接触肯定有点不适应.cocos-2d多了很多感念:导演.场景.节点等.这 ...

  9. 转载 VUE+WebPack环境搭建 https://segmentfault.com/a/1190000010960666

    一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...

随机推荐

  1. POJ1475 Pushing Boxes(BFS套BFS)

    描述 Imagine you are standing inside a two-dimensional maze composed of square cells which may or may ...

  2. Go语言 - 反射

    reflect包 在Go语言的反射机制中,任何接口值都由是一个具体类型和具体类型的值两部分组成的(我们在上一篇接口的博客中有介绍相关概念). 在Go语言中反射的相关功能由内置的reflect包提供,任 ...

  3. AsciiDoc 的相关整理

    Asciidoc Book Editor based on JavaFX 8  Asciidoc FX is a book / document editor to build PDF, Epub, ...

  4. 论文画图工具使用(2)vision软件

    1 软件安装和破解 https://www.cnblogs.com/shitou6/p/8986396.html 自己的网盘 链接:https://pan.baidu.com/s/1EWU0xLMTI ...

  5. 拼图验证码 js,vue

    可查看github网站

  6. UDF——涡量

    用涡量的模来显示涡结构是一种很常用的方法 涡量: 针对二维,涡量场表示为如下的标量: 对于二维流动来说,涡量为正,表示逆时针旋转:涡量为负,表示顺时针旋转 三维涡量: 其中: 计算涡量的模: 二维涡量 ...

  7. Nginx目录文件列表显示

    项目中使用了tomcat,Nginx,测试阶段,生产阶段经常会有些bug需要调查.需要有些日志管理工具,在没有ELK的情况下,可以通过配置nginx来实现基本的日常查看.不需要登录到Linux服务器上 ...

  8. leetcode 494. 目标数

    题目描述: 给定一个非负整数数组,a1, a2, ..., an, 和一个目标数,S.现在你有两个符号 + 和 -.对于数组中的任意一个整数,你都可以从 + 或 -中选择一个符号添加在前面. 返回可以 ...

  9. hinkphp项目部署到Linux服务器上报错“模板不存在”如何解决

    检查了服务器上的文件,并没有缺少文件,再次上传文件到服务器,还是报错.莫名其妙,怀疑是代码问题. 仔细检查后,发现是模板的文件名问题: 用过TP的都知道:thinkphp会在$this->dis ...

  10. 【传输协议】thrift的IDL语法

    一.IDL Thrift 采用IDL(Interface Definition Language)来定义通用的服务接口,然后通过Thrift提供的编译器,可以将服务接口编译成不同语言编写的代码,通过这 ...