js添加网页水印和three.js场景中加水印

我们在日常网页开发的时候，可能想给自己的网页或者canvas里面添加水印，增添个人标记，我这里分为普通静态html页面和threejs中3d场景里面添加水印功能。

一静态html页面添加水印

你只需要在你的页面添加一个图片遮罩，通过绝对定位和z-index层级控制，就可以覆盖在你的内容上面，但是一个很重要的点是要设置

pointer-events: none;//指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。复制代码

既取消水印层的鼠标事件，实现事件穿透，这样水印层只起到一个遮罩标记功能，不会影响到其他层级的事件。

          .water-mark{position: absolute;top: 0;height: 0;width: 50vw;height: 50vh;border: #DFDFDF 1px solid;background-image: url(img/watermark.png);background-position: center;background-repeat: no-repeat;background-size: initial;pointer-events: none;z-index: 2;}复制代码

二 three.js场景中添加水印

three.js场景其实是渲染在一个canvas中，第一种方法图片覆盖依然适用，但是对于scene场景，我们可以添加一个PlaneBufferGeometry，通过设置z轴坐标，这样就直接添加到场景中

 var wmGeometry=new THREE.PlaneBufferGeometry(2,2);
var texture=new THREE.TextureLoader().load('./img/watermark.png');
var wmMaterial=new THREE.MeshBasicMaterial({map:texture});
var wmPlane=new THREE.Mesh(wmGeometry,wmMaterial);
scene.add( wmPlane );复制代码

三总结

其实水印说起来感觉很高大上，本质就是一层图画的遮罩，理解了这个本质，就有很多方式可以实现了。

github代码：004-waterMark

欢迎转载，转载需带着文章出处链接~~

转载于:https://juejin.im/post/5cb42bb5f265da038364b8a3

js添加网页水印和three.js场景中加水印相关推荐

如何给图片加水印？这三个图片加水印方法，帮你添加花式水印
大家有没有这样情况,自己好不容易做好的作品发布到网络平台上结果被他人盗用了,很让人气愤,那我们应该如何避免这种情况呢? 其实我们可以给自己的作品加上一些专属的个性化水印,那小伙伴们知道图片加水印怎么操 ...
PPT中加水印的方法
PPT中加水印的方法网上介绍的比较多的是在PPT母版中加艺术字的方法,这种方法有时候只能对部分页面加上水印,且艺术字的透明度无法调节,非常不方便,本人介绍另外一种PPT加水印的方法: 插入->艺 ...
node.js编写网页_为Node.js编写可扩展架构
node.js编写网页 by Zafar Saleem 通过Zafar Saleem 为Node.js编写可扩展架构 (Writing Scalable Architecture For Nodejs ...
如何添加图片水印？手把手教学4个图片加水印的方法，太便利了
在当今的数字时代,随着图片的广泛使用,越来越多的人开始关注图片的版权问题.为了保护图片的版权,许多人使用水印来标记他们的图片.在这里,我们将介绍3款流行的图片加水印工具,还不清楚图片加水印怎么弄的朋友 ...
html中加水印,html中实现添加水印的功能
最近项目需求中需要在html中添加水印效果,试验了一下几种方法 1.使用背景图添加水印 2.使用定位添加水印 3.使用js添加可配置控制水印 CSS: body{background-color: # ...
html中水印影响文字复制,HTML中文字水印的清除方法_HTML教程
HTML中文字水印的清除方法我们在浏览某些网站的时候,看到不错的网页可能就想把上面的内容给复制下来,但是有的网站就是为了防止别人复制,而在每段文字的结尾处增加了干扰码--与背景颜色相同的文字.清除文 ...
java office文件加水印_文档预览加水印——或可一用的防泄密方式
给文件加水印是常见的一种宣示版权的方式.像Office.WPS都自带加水印功能,能够给文档加上"保密"."严禁复制"这样的水印. 在多可系统中,也有这么一个添加 ...
如何给图片加水印？分享怎么给图片加水印的方法
当我们在平台上发布自己精心拍摄的照片,或分享自己总结的知识点时,难免会遇到一些人盗用自己图片的情况.这时候,我们就会给图片添加上水印,从而来防止自己的图片被盗,那要怎么给图片加水印呢?别着急,今天我就 ...
图片加水印 java_Java使用Thumbnailator给图片加水印
Thumbnailator简介 Thumbnailator是一个高质量的缩略图生成的Java库. 支持: 从现有的图像创建高质量的缩略图. 给图片加水印,可以设置水印的透明度(0%~100%). 支持 ...

js添加网页水印和three.js场景中加水印

欢迎转载，转载需带着文章出处链接~~

js添加网页水印和three.js场景中加水印相关推荐

最新文章

热门文章