vue -- watermark水印添加方法

作者：蛙哇

原文链接： https://segmentfault.com/a/1190000022055867

来源：segmentfault

前言

项目生成公司水印是很普遍的需求，下面是vue项目生产水印的方法。话不多说，复制粘贴就可以马上解决你的需求。

步骤1

创建watermark.js文件。目录结构

/**  水印添加方法  */let setWatermark = (str1, str2) => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id))}let can = document.createElement('canvas')// 设置canvas画布大小can.width = 150can.height = 80let cans = can.getContext('2d')cans.rotate(-20 * Math.PI / 180) // 水印旋转角度cans.font = '15px Vedana'cans.fillStyle = '#666666'cans.textAlign = 'center'cans.textBaseline = 'Middle'cans.fillText(str1, can.width / 2, can.height) // 水印在画布的位置x，y轴cans.fillText(str2, can.width / 2, can.height + 22)let div = document.createElement('div')div.id = iddiv.style.pointerEvents = 'none'div.style.top = '40px'div.style.left = '0px'div.style.opacity = '0.15'div.style.position = 'fixed'div.style.zIndex = '100000'div.style.width = document.documentElement.clientWidth + 'px'div.style.height = document.documentElement.clientHeight  + 'px'div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'document.body.appendChild(div)return id
}// 添加水印方法
export const setWaterMark = (str1, str2) => {let id = setWatermark(str1, str2)if (document.getElementById(id) === null) {id = setWatermark(str1, str2)}
}// 移除水印方法
export const removeWatermark = () => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id))}
}

步骤2

vue中直接引用、使用。

import { removeWatermark, setWaterMark } from '@/common/watermark'
mounted() {setWaterMark('liergou', '李二狗');
},
destroyed() {removeWatermark();
},

效果图：

vue -- watermark水印添加方法相关推荐

电脑上怎么做pdf文件_PDF文件怎么加水印？PDF水印添加方法
有时候为了不让他人随意盗用我们PDF文件里的内容或图片,或者是出于宣传曝光的目的,我们可以通过给自己的PDF文件添加水印的方式来保护PDF文件里的内容.那么PDF文件怎么加水印?有什么方便的PDF水印 ...
markdown编辑模式添加除水印图片方法
前言本博客记录在markdown编辑模式下的去除水印添加图片方法. 对于富文本编辑模式是否适用暂不清楚. 一.玉子的图片示例直接复制粘贴图片: 效果如下: 二.修改粘贴的图片的源代码请看操作: ...
vue 给标签添加data属性_在Vue中获取自定义属性方法:data-id的实例
获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = ...
PHP实现给视频加图片水印,怎么在视频画面上加图片？如何给视频添加自己的图片作为水印？视频添加图片水印的方法...
今天就是周一啦,昨天周末大家有没有跟好友去玩呢~反正小编是跟同学聚会去了,聚会主题:胖.哈哈哈,不过小编可不跟他们一样只会长胖,小编可是瘦瘦瘦的呢,偷偷的告诉你们,小编减肥瘦了三十斤哦,嘻嘻.好啦,废 ...
有哪些在深度模型添加黑盒水印的方法
在深度学习模型中添加黑盒水印的方法有很多,下面是一些常用的方法: 在模型训练过程中添加特殊层或者噪声,从而在模型的输出中隐藏水印信息. 使用训练数据中的特定标签或者属性作为水印,并在训练过程中调整模型 ...
acrobat给pdf加多行水印_批量pdf如何添加水印多个pdf批量加相同水印的方法|支持同时添加文字、图片水印...
本次还是给大家讲讲pdf文件的编辑转换处理,毕竟pdf文件也是在办公学习上是很常用到的,工作时很经常会遇到多个pdf文件要处理的情况,比如说制作好了一系列的pdf文档,需要上传到网络或者传输给他人查阅 ...
pdf怎样添加水印？添加图片水印的方法
PDF文件是我们常用的文件,而且具有不可编辑的优点,那么当我们需要往PDF文件当中添加水印的时候该怎么办呢?分享给大家pdf怎样添加水印,添加图片水印的方法 [PDF转换器] 首先我们准备PDF文件, ...
图像水印添加工具Watermark Sense for Mac
Watermark Sense for Mac是一款支持添加文本和图像水印的图像水印工具,Watermark Sense Mac版可以控制水印透明度.选择混合模式.应用阴影.复制水印等外观及参数.Wa ...
vue 全局动态修改title、keywords、description；vue常用挂载的方法，自定义指令；
vue 全局动态修改title.keywords.description 路由: {path: "xxx",name: "xxx",component: () ...

vue -- watermark水印添加方法

作者：蛙哇

原文链接： https://segmentfault.com/a/1190000022055867

来源：segmentfault

前言

步骤1

步骤2

vue -- watermark水印添加方法相关推荐

最新文章

热门文章