用canvas生成图片为页面添加水印

做政府行业的项目经常会遇到需要为页面添加用户登陆信息水印的功能。

有几个需要注意的点

需要平铺整个页面
水印需要盖在内容上，但是不能影响操作
需要自适应窗口大小

考虑到以上需求有两种方案：

方案一：利用canvas生成图片并给容器添加background背景，并设置repeat，但是这样做有一个弊端，页面的内容不能再设置背景颜色，否则水印会被遮挡，这就不能满足需求了。

方案二：利用canvas生成图片后创建一个div，并将图片设置为div背景图，再将div定位到容器上。此时需要为div设置pointer-events:none，但该属性只兼容IE10+。

pointer-events就是用来进行事件穿透的，如果给父元素设置了pointer-events:none，那么父元素不再监听 鼠标事件事件。也就是说设置该属性后不会影响被遮盖内容的操作，相当于透明的存在，点击不到它。

在项目中需要兼容ie10以上，所以只能采取降级的方法，ie10以上及其他浏览器采用方案二，ie10采用方案一。

具体的实现代码

function IEVersion() {

const userAgent = navigator.userAgent;

const isIE =

userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;

if (isIE) {

const reIE = new RegExp('MSIE (\\d+\\.\\d+);');

reIE.test(userAgent);

const fIEVersion = parseFloat(RegExp['$1']);

if (fIEVersion == 10) {

return 10;

}

} else {

return -1;

}

/*@text 水印文字数组 ['姓名', '身份证']

@sel容器的css选择器

@txtColor水印文字的颜色

export function setWaterMarker(text, sel, txtColor = 'rgba(0, 0, 0, 0.1)') {

const sel= document.querySelector(sel);

let waterBox = null;

for (let node of sel.children) {

if (node.className === 'water-marker') {

waterBox = node;

}

//创建一个canvas并插入到body后隐藏

if (waterBox || sel.style.backgroundImage) {

return false;

}

let can = document.body.querySelector('#water-can');

if (!can) {

can = document.createElement('canvas');

can.setAttribute('id', 'water-can');

document.body.appendChild(can);

}

can.width = 280;

can.height = 280;

can.style.display = 'none';

const cans = can.getContext('2d');

cans.rotate((-20 * Math.PI) / 180); //旋转20度

cans.font = '20px Microsoft YaHei'; //设置文字样式

cans.fillStyle = txtColor; //设置文字颜色

cans.textBaseline = 'Middle';

for (let i = text.length - 1; i >= 0; i--) {

//将文字绘制到画布

cans.fillText(text[i], 0, 70 + i * 30);

}

cans.rotate((20 * Math.PI) / 180); //恢复旋转角度

if (IEVersion() === -1) {

//如果是ie10以外的浏览器

const box = document.createElement('div');

box.style.cssText = `background-image: url(${can.toDataURL(

'image/png'

)});background-repeat:repeat;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;z-index:99;`;

sel.appendChild(box);

} else {

//ie10

sel.style.cssText = `background-image: url(${can.toDataURL(

'image/png'

)});background-repeat:repeat;`;

}

//调用

setWaterMarker(

[

state.userInfo.principal.username,

state.userInfo.principal.certNo,

'192.168.1.23',

formatDate(new Date(), 'yyyy-MM-dd HH:mm')

'.container',

'rgba(255,255,255,0.2)'

);

（掘金的编辑器真是太烂了，从vscode复制出来就乱成一坨）

效果

如此已完成了所有需求，但还是存在一个问题。假如用户是一个开发人员，他可能会在控制台将轻易水印去除掉，目前我还没有找到相应的解决方案。

用canvas生成图片为页面添加水印相关推荐

Vue项目在页面添加水印功能
Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {}let setWatermark = (str) => {let id = '1.234523 ...
Android之页面添加水印
发现一个水印添加方法,感觉很有意思.原理是在布局中放一个全屏的TextView,然后给它设置一个水印背景. 先上个效果图: 自定义WaterMarkBgView 水印背景类: import andr ...
小程序canvas生成图片保存本地
小程序canvas生成图片保存本地注意事项:1.canvas中的图片最好使用 wx.getImageInfo提前下载下来, 2.canvas在处于视图隐藏时期无法生成图片 3.canvas图片生成需 ...
[html] canvas生成图片有没有跨域问题？如果有如何解决？
[html] canvas生成图片有没有跨域问题?如果有如何解决? 前端设置 useCORS: true.后台配置允许跨域个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件简要教程这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
canvas生成图片toDataURL报错的原因和解决方法
canvas生成图片toDataURL报错的原因和解决方法参考文章: (1)canvas生成图片toDataURL报错的原因和解决方法 (2)https://www.cnblogs.com/suna ...
php 生成300dpi图片,canvas生成图片只有96dpi,打印需要300dpi, 请问如何修改这个信息....
canvas生成图片只有96dpi,打印需要300dpi, 请问如何修改这个信息. 回答 var canvas = document.getElementById("canvas" ...
微信小程序canvas生成图片为空白问题
项目中用canvas生成图片时都为空白,原因为 wx.canvasToTempFilePath必须写在wx.draw()的回调中才能实现 createImg ( imgPath) {//生成图片con ...
canvas生成图片上传服务器，网络图片生成图片文件
vue+canvas 生成签名图片并保存数据库 VUE+ElementUI 最近根据项目需求在用户生成订单的时候需要附上自己的签名照片,因为考虑到不能上传图片所以使用canvas画图功能. 而目前后 ...

用canvas生成图片为页面添加水印

用canvas生成图片为页面添加水印相关推荐

最新文章

热门文章