精华内容
下载资源
问答
  • css水印

    2020-11-06 14:41:16
    同级遮罩层 遮罩层样式 遮罩层内容 最终样式

    同级遮罩层

    在这里插入图片描述

    遮罩层样式

    在这里插入图片描述

    遮罩层内容

    在这里插入图片描述

    最终样式

    在这里插入图片描述

    展开全文
  • 页面CSS水印

    2015-03-11 15:47:22
    使用css对页面内容加载水印样式,防止复制、截屏、打印等非法获取页面内容。
  • 前阵子通过 前端水印生成方案(网页水印+图片水印) 这篇文章学习了一下水印的生成方案,对其中使用 Canvas 实现网页水印的方案十分感兴趣,于是对相关代码加以修改,实现了一个 React 水印组件并发布到 ? npm。该组件...

    作者:前端小黑

    基本介绍 ?

    • 前阵子通过 前端水印生成方案(网页水印+图片水印) 这篇文章学习了一下水印的生成方案,对其中使用 Canvas 实现网页水印的方案十分感兴趣,于是对相关代码加以修改,实现了一个 React 水印组件并发布到 ? npm。
    • 该组件是通过 Canvas 生成水印,并使用 MutationObserve (可以监听DOM结构变化的接口)监视 DOM 的变动,使得水印不可被删除、且属性不可被修改。
    • 关于发布react组件的方法之前已在使用npm发布一个react组件(踩坑实践)中进行介绍,本文将不再进行阐述,本文着重介绍组件的使用效果及具体实现。

    效果演示 ?

    • 该组件已发布到npm上,可使用以下命令安装:
    npm install --save watermark-component-for-react
    • 在项目中使用:
    import React from 'react';
    import WaterMark from 'watermark-component-for-react';
    import * as styles from './index.css';

    class ReactDemo extends React.Component{
    render () {
    const content = `内部文档,请勿外传 by-前端小黑`;
    return (
    hello world

    );
    }
    }
    export default ReactDemo;
    复制代码
    • 结果:

      70c56ee7737b87bb9fba36014358ab1c.png
      img
    • ⚠️注意:需要加水印的组件需要包裹在 WaterMark 组件中,即作为 WaterMark 的子组件。

    组件特点

    1. 使用 MutationObserve 监视 DOM 的变动,水印不可被删除、且属性不可被修改:

      4d0d3a0da2d842650a6be5e03f94c7ed.gif
      img
    2. 丰富的 props 使得水印组件可实现定制化需求:

    成员说明类型默认值
    stylewatermark最外层组件内联样式undefined | objectundefined
    container容器HTMLDivElementdocument.body
    widthcanvas元素宽string300
    heightcanvas元素高string200
    textAlign绘制文本的对齐方式stringleft
    textBaseline文本基准线stringbottom
    font字体大小及样式string16px Microsoft Yahei
    fillStyle自定义水印的颜色stringblack
    content水印内容string内部文档,请勿外传
    globalAlpha设置图形和图像透明度的值number0.1
    rotate文字旋转角度number16
    zIndex元素堆叠顺序number1000

    具体实现 ?

    • 水印组件的源码如下:
    import * as React from 'react';
    import { watermark } from '../../utils/lib'

    export default class WaterMark extends React.Component {
    constructor(props) {
    super(props);

    this.container = null;
    }

    componentDidMount () {
    const { style, ...options } = this.props;
    watermark({
    container: this.container,
    ...options,
    });
    }

    render () {
    const style = {
    position: 'relative',
    ...this.props.style,
    };
    return (
    this.container = el} id="watermark" style={style}>
    {this.props.children}

    );
    }
    }
    • 核心代码是 watermark 这个方法,具体代码如下:
    export function watermark (options) {
    const {
    container = document.body, // 容器
    width = '300', // canvas元素宽
    height = '200', // canvas元素高
    textAlign = 'left', // 文字对齐
    textBaseline = 'bottom', // 基准线
    font = '16px Microsoft Yahei', // 字体大小及样式
    fillStyle = '#000', // 自定义水印的颜色
    content = '内部文档,请勿外传', // 水印内容
    globalAlpha = 0.1, // 设置图形和图像透明度的值
    rotate = 16, // 文字旋转角度
    zIndex = 1000, // 元素堆叠顺序
    } = options;

    let canvas = document.createElement('canvas');
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    let ctx = canvas.getContext('2d'); // 获取 canvas2d 上下文
    ctx.globalAlpha = globalAlpha;
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;
    ctx.font = font;
    ctx.fillStyle = fillStyle;
    ctx.rotate((Math.PI * rotate) / 180);
    ctx.fillText(content, 50, 50);

    const base64Url = canvas.toDataURL(); // 返回一个包含图片展示的 data URI

    const __wm = document.querySelector('.__wm');//选择器
    const watermarkDiv = __wm || document.createElement("div");
    const styleStr = `
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:${zIndex};
    pointer-events:none;
    background-repeat:repeat;
    background-image:url('${base64Url}')`;

    watermarkDiv.setAttribute('style', styleStr);
    watermarkDiv.classList.add('__wm'); // 为元素添加“__wm”类名

    container.style.position = 'relative';
    if (!__wm) {
    container.appendChild(watermarkDiv); // 添加元素
    }

    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    // 检查浏览器是否支持这个API
    if (MutationObserver) {
    const args = arguments[0];
    let mo = new MutationObserver(function () {
    const __wm = document.querySelector('.__wm');
    // 只在__wm元素变动才重新调用
    if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm || container.style.position !== 'relative') {
    // 避免一直触发
    mo.disconnect();
    mo = null;
    watermark(args);
    }
    });
    mo.observe(container, {
    attributes: true, // 观察目标节点的属性节点
    subtree: true, // 观察目标节点的所有后代节点
    childList: true, // 观察目标节点的子节点
    })
    }
    };
    • 为便于理解,已在以上文件加上了注释,可以看到,通过使用MutationObserve ,当水印组件被删除、属性被修改或水印组件的容器定位属性 position 不为 relative时,会重新调用watermark方法。

    总结 ?

    • 为了避免公司的内部文档被截图外泄,有必要在系统页面上面增加水印。
    • 为了避免某些用户将水印删除,需要对水印组件进行监听(通过 MutationObserve 实现),当组件被删除时动态插入新的水印。
    • 本文介绍的水印组件(watermark-component-for-react)已发布到 NPM,欢迎大家下载使用。

    以上内容如有遗漏错误,欢迎留言 ✍️指出,一起进步???

    如果觉得本文对你有帮助,??留下你宝贵的 ?

    参考资料

    1. 前端水印生成方案(网页水印+图片水印)
    2. Canvas API MDN文档
    3. MutationObserver MDN文档
    4. 使用npm发布一个react组件(踩坑实践)

    2e72432b3cd649e2c2856106b6a2f4f3.gif

    真香,朕在看了!

    展开全文
  • tp-watermark.js网页添加水印插件作者:鹏仔先生 上周五,出差去改上个前端遗留的小问题,用到了watermark.js这个网站添加水印插件,功能很简单,就是给网页添加个水印,我看了下网上,有很多种,基本都是Canvas实现...

    tp-watermark.js网页添加水印插件

    作者:鹏仔先生

    528c980c3c85095eb4e040bf86082c29.png

    上周五,出差去改上个前端遗留的小问题,用到了watermark.js这个网站添加水印插件,功能很简单,就是给网页添加个水印,我看了下网上,有很多种,基本都是Canvas实现,我想要的是行与行之间交错效果,可是没有找到对应文档,看的烦的...

    那就自己简单写个网页添加水印插件吧, tp-watermark.js

    身为初级前端,写法比较low,但是功能很完善,请大家多多指导

    下载插件:https://qzhan.lanzous.com/iP9effhq7af

    DEMO下载:https://qzhan.lanzous.com/i7le1fhq7lg

    下载完引入插件

    使用水印

    RemoveTpWatermark();

    删除水印

    RemoveTpWatermark();

    很方便使用,一列显示几行,一行显示几列都是计算的,大家不用自己定义(具体需要的参数已添加注释)。

    // 添加水印方法function TpWatermark(CON,H,W,R,C,S,O) {// 判断水印是否存在,如果存在,那么不执行if (document.getElementById('tp-watermark') != null) {return}var TpLine = parseInt(document.body.clientWidth/W) * 2; // 一行显示几列var StrLine = '';for(var i = 0; i < TpLine; i++){StrLine += ''+ CON +''}var DivLine = document.createElement("div");DivLine.innerHTML = StrLine;var TpColumn = parseInt(document.body.clientHeight/H) * 2; // 一列显示几行var StrColumn = '';for(var i = 0; i < TpColumn; i++){StrColumn += '
    ' + DivLine.innerHTML + '
    ';}var DivLayer = document.createElement("div");DivLayer.innerHTML = StrColumn;DivLayer.id = "tp-watermark"; // 给水印盒子添加类名DivLayer.style.position = "fixed";DivLayer.style.top = "0px"; // 整体水印距离顶部距离DivLayer.style.left = "-100px"; // 改变整体水印的left值DivLayer.style.zIndex = "99999"; // 水印页面层级DivLayer.style.pointerEvents = "none";document.body.appendChild(DivLayer); // 到页面中}// 移除水印方法function RemoveTpWatermark(){// 判断水印是否存在,如果存在,那么执行if (document.getElementById('tp-watermark') == null) {return}document.body.removeChild(document.getElementById('tp-watermark'));}

    页面需要使用时

    // 执行添加TpWatermark('水印','170','400','-20','red','70','.15');// TpWatermark(CON,H,W,R,C,S,O); // 值一一对应

    CON => 水印文字内容

    H => 水印行高

    W => 水印宽度

    R => 旋转度数(可为负值)

    C => 水印字体颜色

    S => 水印字体的大小

    O => 水印透明度(0~1之间取值)

    页面清除水印时

    // 执行移除RemoveTpWatermark();

    水印行与行之间需要交错显示,需添加css代码(padding-left的交错值,设置的水印宽度的一半即可)

    /*通过此样式,控制行与行之间的交错显示  为0则不交错*/#tp-watermark div:nth-child(2n){padding-left: 200px;}

    给鹏仔添加关注,后期版本会更新针对板块来添加水印。

    展开全文
  • 市面上去水印的工具非常多,如PS这种虽然功能强大,但是对于普通用户来说,学习成本太高。今天给大家带来一款更加智能和方便的图片去水印软件Inpaint这是一款可以从图片上去除不必要的物体,让您轻松摆脱照片上的...

    市面上去水印的工具非常多,如PS这种虽然功能强大,但是对于普通用户来说,学习成本太高。今天给大家带来一款更加智能和方便的图片去水印软件Inpaint

    这是一款可以从图片上去除不必要的物体,让您轻松摆脱照片上的水印、划痕、污渍、标志等瑕疵的实用型软件;简单说来,Inpaint可以帮助你去掉图片中任何你不想要的部分。

    软件详情

    软件名称:Inpaint软件版本:8.1软件大小:32M系统支持:Windows 10、8、7、Vista 和 Mac OS官方价格:单用户 $19.99(永久)简体中文:支持有无捆绑:无捆绑测试环境:Windows 10 Enterprise LTSC 2019(x64)

    Inpaint中文版是一个比较好用的图片去水印软件,Inpaint可以从您的图片中删除不想要的部分,如额外的线、人物、文字等。选定图片区域后Inpaint会进行自动擦除,同时Inpaint会根据附近图片区域重建擦除的区域,使看起来完美无暇,没有痕迹。去水印整个使用过程只需要三步比PS更方便强大

    比如下面的这个案例,不管水印在那里,Inpaint都可以很轻松的去掉,比较好的一点就是去掉水印的同时对于这部分区域图片的重建非常自然,基本看不出来操作的痕迹。这对于很多手笨的人来讲,起码能省2、3个小时的时间。

    e2e7a607-711f-eb11-8da9-e4434bdf6706.jpeg

    上面的是官方给出的去除效果,下面的是我随机找的图片做的前后对比。华为P40屏幕中间是有颜色渐变的,去除的效果也是非常不错的。

    e5e7a607-711f-eb11-8da9-e4434bdf6706.jpeg

    大家可以自行比较一下,涂抹的痕迹基本上看不出来。

    e7e7a607-711f-eb11-8da9-e4434bdf6706.jpeg

    除了去水印,Inpaint还可以去除一些你不想要的东西。比如下图这里面多余的人物出镜,在修图的时候就可以轻松去除。这点在旅游拍照中实在是太好用,是拯救废片的绝佳神器。

    e8e7a607-711f-eb11-8da9-e4434bdf6706.jpeg
    e9e7a607-711f-eb11-8da9-e4434bdf6706.jpeg

    目前,这款软件已经收费,在网上还能找到免费的渠道,如果有能力建议大家支持正版;如果没有,这里当然会提供给大家,输入关键字“去水印”获取安装包

    1. 打开图片

    可以直接将图片拖入或者“文件 - 打开”

    2. 选择移除区

    使用工具栏中的选择工具来选择需要移除的元素。

    3. 选择参考区

    点击“参考区”工具,来选择参考区域。理论上来说,参考区域越小,干扰因素越少,填充效果越好。

    4. 处理图像

    点击菜单栏上的“处理图像”按键开始处理

    下面是流程演示:

    eae7a607-711f-eb11-8da9-e4434bdf6706.jpeg

    3. 辅助线

    辅助线(图中蓝线)的主要作用是帮助软件来区分不同的背景,提升清除效果

    ebe7a607-711f-eb11-8da9-e4434bdf6706.jpeg

    4. 还原马赛克?

    Let's get this straight: censoring is irreversible. You cannot restore original pixels of the image that are now painted over or blurred. But there is a way to recover a part of original information using the surrounding (uncensored) pixels using Inpaint.

    上面是官方给的答复:你想多了!

    其他说明

    • 通过鼠标滚轮来缩放图片

    • 通过空格+左键的方式来拖动图片

    输入关键字“去水印”获取安装包

    ece7a607-711f-eb11-8da9-e4434bdf6706.png

    ede7a607-711f-eb11-8da9-e4434bdf6706.gif

    展开全文
  • 前景提要前几期写了一篇关于谷歌插件制作的文章,但是因为没有正经的小实战,一直鸽了这么多期文章,这里写一篇比较受关注的腾讯视频的水印去除的文章,方便各位日后爬取腾讯视频的时候总带其水印爬虫。学习制作谷歌...
  • 「本期内容标签」安卓iOS电脑小程序网站游戏 教程话说,最近一些非Flyme 8内测用户的魅友偷渡去刷了系统更新包,就出现了魅族手机全局水印的情况,如下这种网上反馈图片,有点你刷的是盗版Windows的感觉:▼图片来自...
  • CSS水印“点击穿透”

    2018-04-16 13:39:00
    转载于:https://www.cnblogs.com/cwzqianduan/p/8855478.html
  • 高清壁纸来自吾爱「那小子真坏」分享的高清无水印壁纸。分辨率4K和8K;漫威系列,DC系列,权利的游戏,速度与激情……原图下载链接: https://pan.baidu.com/s/1BPAcP1QxcVYUX975WiUQ2A提取码: ixuy...
  • CSS 图片水印

    千次阅读 2017-03-17 16:00:43
    准备给一些图片加上水印,截图发出去,直接用CSS来做了,感谢搭档Grace提供的CSS帮助。图片和水印展示区域<div class="watermark-image"></div>样式.watermark-image { position: relative; width: 300px; height:...
  • 使用css水印效果

    万次阅读 2018-04-11 18:15:42
    * @description添加水印 * @param {Obj} settings水印配置参数 */ function waterMark(markElement) {   $('#' + markElement.waterMarkId).find('.markElement').remove();   var settings...
  • CSS 文字背景水印

    2021-01-17 14:23:24
    通常CSS开发人员的做法是把文字导出来转换成图片,然后作为背景图显示,但是这样成本有些高,也不利于日后的维护。 这里给大家介绍一种实用的技术,可以让文字作为CSS背景图片。 一、SVG本质上就是一个图像 SVG...
  • CSS:图片水印

    2018-10-29 14:44:01
    1. 原图 代码: 2. 虚化效果 代码: /* -webkit-filter: blur(2px); */ 3. 透明度修改效果 代码: opacity:0.4 ;/* opacity 属性能够设置的值从 0.0 到 1.0。 */ filter:alpha(opacity=40);......
  • css为图片加水印

    千次阅读 2014-08-25 10:43:39
    css实现的图片水印效果 .transp-block{background:#fff url(aaa.png) no-repeat right bottom;margin:0px auto;width:512px;height:380px;overflow:hidden} img.transparent{filter:alpha(opacity=70);moz-opacity:...
  • 运行一下代码才能看到效果噢,你会看到百度地图下边有LOGO,那可不是百度加上的噢,是通过CSS滤镜加上的效果,是不是和图片水印的效果相差无几呢? 代码内容: View Code <head><title>用CSS实现...
  • 最近做合同模板,发现原本的添加水印的方式出现了新bug。或者说原有的那种方式,忽略了一种特殊的情况:样式强加的打印页(page-break-after: always;)。 Q:利用js获取合同网页的宽高,来动态计算添加水印,强制...
  • 如下图所示,需要给页面添加水印,并且不影响页面的点击事件。解决办法:添加一个遮罩层,设置position:fixd;为此遮罩层设置pointer-events:none;,使其下面盒子的点击事件能够正常点击。 ...
  • 水印的需求都是为了不可去除的。所以一定要防止用户通过打开控制台, 进行css操作,再截图。 用到的 api 是window.MutationObserver 。 话不多说, 上代码: 思路就是:当你监控到某一个元素样式变化了,你就再给...
  • 水印图片,使图片镜像化,同时使字体在图片上透明,
  • 纯HTML+CSS实战之图片水印方案一

    千次阅读 2019-01-22 14:19:38
    效果如图所示: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;...图片水印方案一&lt;/title&gt; &lt;style&gt; *{
  • 有些时候我们需要提示客户“DO NOT COPY”, 就像在MS Word中所做的那样,昨天遇到这样的case,就尝试用CSS+DIV解决:    页面代码如下,还有一些地方需要改进,比如调整水印的大小以覆盖全部页面等:     &...
  • In this article, I will explain how watermark textbox using JavaScript and CSS is very useful and uses less resources compared to AJAX. Overview JavaScript is used to impleme
  • html,css如何实现穿透顶层元素点击底部元素,实现水印效果,css3属性:pointer-events的妙用 pointer-events属性在官方中说明指定元素是否能成为鼠标事件的target,其实意思指的就是该元素是否能被选中,该属性...
  • // 如果当前有水印效果,先移除水印重新生成 if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id) as any); // 先使用canvas实现水印的图片 const can = ...
  • Head First HTML与CSS、XHTML(中文版){去水印}.haozip02.zip 分卷文件共有以下2个: Head First HTML与CSS、XHTML(中文版){去水印}.haozip01.zip Head First HTML与CSS、XHTML(中文版){去水印}.haozip02.zip 为了更...
  • <p>On the University system am developing. I supposed to generate admission letters where each letter has two pages with a dynamic diagonal student name . The problem is on printing the watermark ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 468
精华内容 187
关键字:

css水印