使用canvas给页面添加文字水印

参考：

vue页面添加水印 - 简书

代码：根据我们的需求我做了一点修改

let watermark = {};let setWatermark = (str, targetDom) => {let id = 'watermark';if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id));}let can = document.createElement("canvas");can.width = 200;can.height = 100;let cans = can.getContext("2d");cans.rotate((-20 * Math.PI) / 180);cans.font = "15px Vedana";cans.fillStyle = "rgba(0, 0, 0, 0.30)";cans.textAlign = "left";cans.textBaseline = "Middle";cans.fillText(str, can.width / 20, can.height);let div = document.createElement("div");div.id = id;div.style.pointerEvents = "none";div.style.top = targetDom.offsetTop + "px";div.style.left = targetDom.offsetLeft + "px";div.style.position = "fixed";div.style.zIndex = "100000";div.style.width = targetDom.clientWidth + "px";div.style.height = targetDom.clientHeight + "px";div.style.background ="url(" + can.toDataURL("image/png") + ") left top repeat";document.body.appendChild(div);return id;
};// 如果水印存在 展示水印 如果不存在 创建之后展示
// targetDom 是水印要盖住的元素
watermark.set = (str, targetDom) => {if (document.getElementById('watermark')) {document.getElementById('watermark').style.display = 'block'} else {let id = setWatermark(str, targetDom);let timer = setInterval(() => {if (document.getElementById(id) === null) {id = setWatermark(str, targetDom);} else {clearInterval(timer)}}, 2000);window.onresize = () => {setWatermark(str, targetDom);};}
};
//页面切换时展示水印 因为项目组件是keep-alive的 所以在beforeRouteEnter的时候调这个
watermark.show = () => {if (document.getElementById('watermark')) {document.getElementById('watermark').style.display = 'block'}}
//beforeRouteLeave切换其他页面时可能需要隐藏水印
watermark.hide = () => {document.getElementById('watermark').style.display = 'none'
}
export default watermark

使用canvas给页面添加文字水印相关推荐

计算机页面添加文字水印在哪,怎么添加水印-Word小技巧-快速添加高大上的水印...
不知道各位小伙伴是否见过这样的文档,带有类似[内部文件]/[严禁外泄]水印的文档,是不是觉得很高大上,神圣而不可侵犯的感觉油然而生?只需要一分钟,小编教你如何为文档快速添加水印. 一.添加水印切换到 ...
使用JS（watermark）给HTML页面添加文字水印（全网最简单，最详细，复制即用，提供源码链接）
前言: 最近在做项目,PD提需求让做一个页面水印,百度到的答案好像大部分都是图片的,要么七七八八的,百度了好久,现在总结出来了这个精简中的精简版的教程,与大家分享.(源码下载链接在文章末尾,如果不想看 ...
html页面加文字怎么加,HTML页面添加文字水印
1.canvas 画文字 2.获取图文字的base64 3.给div 做背景,注意 div 设置 const watermark = {} const setWatermark = str =&g ...
canvas 添加文字水印、图片水印并实现图片水印透明
先上效果图 1.图片添加文字 2.图片添加图片水印 1.图片添加文字水印 async init() {let imgUrl ="http://qysmjczto.hn-bkt.clouddn ...
php生成背景并加字,PHP给图片添加文字水印实例
PHP给图片添加文字水印实例,支持中文文字水印,是否覆盖原图,自定义设置水印背景色.文字颜色.字体等. 水印类water.class.php var $Path = "./"; / ...
如何给原图添加文字水印和图片水印
今天记录一下如何给自己的图片添加记号(两种方法:一是添加图片水印,二是添加文字水印,我都有哦!!!),防止有人盗图侵权,但是该方法不是修图,是源码敲出来的,适用于android开发!!! 话不多说,稍 ...
android水印控件,Android图片添加文字水印并保存水印文字图片到指定文件
Android图片添加文字水印并保存水印文字图片到指定文件package zhangphil.test;import android.graphics.Bitmap;import android.gr ...
java实现给PDF文件添加图片水印，java实现给PDF文件添加文字水印
接上一篇,pdf跟tif 是一起做的 java实现 1.给PDF文件添加图片水印: public static void waterMark1(String inputFile,String outp ...
如何批量给pdf文件添加文字水印？
工作中我们会给重要的办公文件文件水印,给文件加上公司的名称等,这样可以有效防止文件内容被别人盗用抄袭,其中就包括word.Excel.PPT.图片.PDF等文件.PDF文件由于其特殊性,越来越成为最常 ...
PDF怎么添加文字水印
有时候自己辛辛苦苦做的文件被别人直接拿去使用就会有点不舒服,如果我们把文件中添加上水印呢?今天就以PDF文件为例子来教大家如果给PDF文件添加水印,一起来看看吧! 方法一.迅捷PDF编辑器https ...

使用canvas给页面添加文字水印

使用canvas给页面添加文字水印相关推荐

最新文章

热门文章