前端水印处理

最新推荐文章于 2024-07-03 17:24:20 发布
最新推荐文章于 2024-07-03 17:24:20 发布
阅读量560 收藏 1
点赞数 1
文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50748620/article/details/121744379
版权

水印处理-在声明周期中调用method 方法

在这里插入代码片
 引入
 // import WaterMark from '../utils/watemark'
 method 使用
 // showM () {
    //   new WaterMark({
    //     watermark_cols: 1000, // 水印列数
    //     watermark_x_space: 0, // 水印x轴间隔
    //     watermark_y_space: 0, // 水印y轴间隔
    //     watermark_angle: 15, // 水印倾斜度数
    //     watermark_parent_width: 0, // 水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
    //     watermark_parent_height: 0, // 水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
    //     watermark_parent_node: null, // 水印插件挂载的父元素element,不输入则默认挂在body上
    //     watermark_rows: 1000, // 水印行数
    //     watermark_txt: '号码 1109', // 水印内容
    //     watermark_width: 60, // 水印宽度
    //     watermark_color: '#00000', // 字体颜色
    //     watermark_fontsize: '12px', // 字体大小
    //     watermark_angle: 45, // 字体倾斜角度
    //     watermark_height: 40, // 水印长度
    //     watermark_y_space: 40, // Y轴间隔
    //     watermark_x: 0, // 水印起始位置x轴坐标
    //     watermark_y: -20, // 水印起始位置Y轴坐标
    //     watermark_alpha: '0.7' // 水印字体透明度
    //   })

    // }
watermark_parent_node ===传入需要水印的dom

封装的 watemark.js

var defaultSettings = {
watermark_id: ‘wm_div_id’, // 水印总体的id
watermark_prefix: ‘mask_div_id’, // 小水印的id前缀
watermark_txt: ‘测试水印’, // 水印的内容
watermark_x: 20, // 水印起始位置x轴坐标
watermark_y: 20, // 水印起始位置Y轴坐标
watermark_rows: 0, // 水印行数
watermark_cols: 0, // 水印列数
watermark_x_space: 50, // 水印x轴间隔
watermark_y_space: 50, // 水印y轴间隔
watermark_font: ‘微软雅黑’, // 水印字体
watermark_color: ‘black’, // 水印字体颜色
watermark_fontsize: ‘18px’, // 水印字体大小
watermark_alpha: 0.15, // 水印透明度，要求设置在大于等于0.005
watermark_width: 100, // 水印宽度
watermark_height: 100, // 水印长度
watermark_angle: 15, // 水印倾斜度数
watermark_parent_width: 0, // 水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
watermark_parent_height: 0, // 水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
watermark_parent_node: null, // 水印插件挂载的父元素element,不输入则默认挂在body上
monitor: true // monitor 是否监控， true: 不可删除水印; false: 可删水印。
}
class WaterMark {
constructor(options) {
this.globalSetting = null
this.init(options)
}
settingsToDefaultSetting (settings) {
defaultSettings.watermark_id = settings.watermark_id || defaultSettings.watermark_id
defaultSettings.watermark_prefix = settings.watermark_prefix || defaultSettings.watermark_prefix
defaultSettings.watermark_txt = settings.watermark_txt || defaultSettings.watermark_txt
defaultSettings.watermark_x = settings.watermark_x || defaultSettings.watermark_x
defaultSettings.watermark_y = settings.watermark_y || defaultSettings.watermark_y
defaultSettings.watermark_rows = settings.watermark_rows || defaultSettings.watermark_rows
defaultSettings.watermark_cols = settings.watermark_cols || defaultSettings.watermark_cols
defaultSettings.watermark_x_space = settings.watermark_x_space || defaultSettings.watermark_x_space
defaultSettings.watermark_y_space = settings.watermark_y_space || defaultSettings.watermark_y_space
defaultSettings.watermark_font = settings.watermark_font || defaultSettings.watermark_font
defaultSettings.watermark_color = settings.watermark_color || defaultSettings.watermark_color
defaultSettings.watermark_fontsize = settings.watermark_fontsize || defaultSettings.watermark_fontsize
defaultSettings.watermark_alpha = settings.watermark_alpha || defaultSettings.watermark_alpha
defaultSettings.watermark_width = settings.watermark_width || defaultSettings.watermark_width
defaultSettings.watermark_height = settings.watermark_height || defaultSettings.watermark_height
defaultSettings.watermark_angle = settings.watermark_angle || defaultSettings.watermark_angle
defaultSettings.watermark_parent_width = settings.watermark_parent_width || defaultSettings.watermark_parent_width
defaultSettings.watermark_parent_height = settings.watermark_parent_height || defaultSettings.watermark_parent_height
defaultSettings.watermark_parent_node = settings.watermark_parent_node || defaultSettings.watermark_parent_node
defaultSettings.monitor = settings.monitor || defaultSettings.monitor
}
loadMark (settings) {
/* 采用配置项替换默认值，作用类似jquery.extend*/
if (arguments.length === 1 && typeof arguments[0] === ‘object’) {
var src = arguments[0] || {}
for (const key in src) {
if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue
/* veronic: resolution of watermark_angle=0 not in force*/
else if (src[key] || src[key] === 0) defaultSettings[key] = src[key]
}
}

this.settingsToDefaultSetting(settings)

/* 如果元素存在则移除*/
var watermark_element = document.getElementById(defaultSettings.watermark_id)
watermark_element && watermark_element.parentNode && watermark_element.parentNode.removeChild(watermark_element)
/* 如果设置水印挂载的父元素的id*/
var watermark_parent_element = document.getElementById(defaultSettings.watermark_parent_node)
var watermark_hook_element = watermark_parent_element || document.body
/* 获取页面宽度*/
var page_width = Math.max(watermark_hook_element.scrollWidth, watermark_hook_element.clientWidth)
/* 获取页面最大长度*/
var page_height = Math.max(watermark_hook_element.scrollHeight, watermark_hook_element.clientHeight)

var setting = arguments[0] || {}
var parentEle = watermark_hook_element

var page_offsetTop = 0
var page_offsetLeft = 0
if (setting.watermark_parent_width || setting.watermark_parent_height) {
  /* 指定父元素同时指定了宽或高*/
  if (parentEle) {
    page_offsetTop = parentEle.offsetTop || 0
    page_offsetLeft = parentEle.offsetLeft || 0
    defaultSettings.watermark_x = defaultSettings.watermark_x + page_offsetLeft
    defaultSettings.watermark_y = defaultSettings.watermark_y + page_offsetTop
  }
} else {
  if (parentEle) {
    page_offsetTop = parentEle.offsetTop || 0
    page_offsetLeft = parentEle.offsetLeft || 0
  }
}
/* 创建水印外壳div*/
var otdiv = document.getElementById(defaultSettings.watermark_id)
var shadowRoot = null
if (!otdiv) {
  otdiv = document.createElement('div')
  /* 创建shadow dom*/
  otdiv.id = defaultSettings.watermark_id
  // pointer-events: none !important  不会影响原有的DOM操作
  otdiv.setAttribute('style', 'pointer-events: none !important; display: block !important')
  /* 判断浏览器是否支持attachShadow方法*/
  if (typeof otdiv.attachShadow === 'function') {
    /* createShadowRoot Deprecated. Not for use in new websites. Use attachShadow*/
    shadowRoot = otdiv.attachShadow({ mode: 'open' })
  } else {
    shadowRoot = otdiv
  }
  /* 将shadow dom随机插入body内的任意位置*/
  var nodeList = watermark_hook_element.children
  var index = Math.floor(Math.random() * (nodeList.length - 1))
  if (nodeList[index]) {
    watermark_hook_element.insertBefore(otdiv, nodeList[index])
  } else {
    watermark_hook_element.appendChild(otdiv)
  }
} else if (otdiv.shadowRoot) {
  shadowRoot = otdiv.shadowRoot
}
/* 三种情况下会重新计算水印列数和x方向水印间隔：1、水印列数设置为0，2、水印宽度大于页面宽度，3、水印宽度小于于页面宽度*/
defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space) || 0)
var temp_watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols))
defaultSettings.watermark_x_space = temp_watermark_x_space ? defaultSettings.watermark_x_space : temp_watermark_x_space
var allWatermarkWidth
/* 三种情况下会重新计算水印行数和y方向水印间隔：1、水印行数设置为0，2、水印长度大于页面长度，3、水印长度小于于页面长度*/
defaultSettings.watermark_rows = parseInt((page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space) || 0)
var temp_watermark_y_space = parseInt((page_height - defaultSettings.watermark_y - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows))
defaultSettings.watermark_y_space = temp_watermark_y_space ? defaultSettings.watermark_y_space : temp_watermark_y_space
var allWatermarkHeight

if (watermark_parent_element) {
  allWatermarkWidth = defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)
  allWatermarkHeight = defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)
} else {
  allWatermarkWidth = page_offsetLeft + defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)
  allWatermarkHeight = page_offsetTop + defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)
}

var x
var y
for (var i = 0; i < defaultSettings.watermark_rows; i++) {
  if (watermark_parent_element) {
    y = page_offsetTop + defaultSettings.watermark_y + (page_height - allWatermarkHeight) / 2 + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
  } else {
    y = defaultSettings.watermark_y + (page_height - allWatermarkHeight) / 2 + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
  }
  for (var j = 0; j < defaultSettings.watermark_cols; j++) {
    if (watermark_parent_element) {
      x = page_offsetLeft + defaultSettings.watermark_x + (page_width - allWatermarkWidth) / 2 + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
    } else {
      x = defaultSettings.watermark_x + (page_width - allWatermarkWidth) / 2 + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
    }
    var mask_div = document.createElement('div')
    var oText = document.createTextNode(defaultSettings.watermark_txt)
    mask_div.appendChild(oText)
    /* 设置水印相关属性start*/
    mask_div.id = defaultSettings.watermark_prefix + i + j
    /* 设置水印div倾斜显示*/
    mask_div.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
    mask_div.style.MozTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
    mask_div.style.msTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
    mask_div.style.OTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
    mask_div.style.transform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
    mask_div.style.visibility = ''
    mask_div.style.position = 'absolute'
    /* 选不中*/
    mask_div.style.left = x + 'px'
    mask_div.style.top = y + 'px'
    mask_div.style.overflow = 'hidden'
    mask_div.style.zIndex = '9999999'
    mask_div.style.opacity = defaultSettings.watermark_alpha
    mask_div.style.fontSize = defaultSettings.watermark_fontsize
    mask_div.style.fontFamily = defaultSettings.watermark_font
    mask_div.style.color = defaultSettings.watermark_color
    mask_div.style.textAlign = 'center'
    mask_div.style.width = defaultSettings.watermark_width + 'px'
    mask_div.style.height = defaultSettings.watermark_height + 'px'
    mask_div.style.display = 'block'
    mask_div.style['-ms-user-select'] = 'none'
    /* 设置水印相关属性end*/
    shadowRoot.appendChild(mask_div)
  }
}
this.observerFunc(settings, watermark_hook_element)
}
observerFunc (settings, watermark_hook_element) {
// monitor 是否监控， true: 不可删除水印; false: 可删水印。
// 监听dom是否被移除或者改变属性的回调函数
var callback = (records) => {
if ((this.globalSetting && records.length === 1) || records.length === 1 && records[0].removedNodes.length >= 1) {
this.loadMark(this.globalSetting)
}
}
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
var watermarkDom = new MutationObserver(callback)
var option = {
‘childList’: true,
‘attributes’: true,
‘subtree’: true
}
const minotor = settings.monitor === undefined ? defaultSettings.monitor : settings.monitor
if (minotor) {
watermarkDom.observe(watermark_hook_element, option)
watermarkDom.observe(document.getElementById(‘wm_div_id’).shadowRoot, option)
}
}
removeMark () {
/* 移除水印*/
/* 采用配置项替换默认值，作用类似jquery.extend*/
if (arguments.length === 1 && typeof arguments[0] === ‘object’) {
var src = arguments[0] || {}
for (const key in src) {
if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue
/* veronic: resolution of watermark_angle=0 not in force*/
else if (src[key] || src[key] === 0) defaultSettings[key] = src[key]
}
}

/* 移除水印*/
var watermark_element = document.getElementById(defaultSettings.watermark_id)
var _parentElement = watermark_element.parentNode
_parentElement.removeChild(watermark_element)
}
init (settings) {
this.globalSetting = settings
this.loadMark(settings)
window.addEventListener(‘onload’, () => {
this.loadMark(settings)
})
window.addEventListener(‘resize’, () => {
this.loadMark(settings)
})
}
load (settings) { /* 手动加载水印*/
this.globalSetting = settings
this.loadMark(settings)
}
remove () { /* 手动移除水印*/
this.removeMark()
}
}
export default WaterMark

开箱即用

时间路人e
关注
前端Vue添加水印功能
11-17
总的来说，Vue.js提供了一种灵活的方式在前端项目中添加水印。无论是通过CSS还是使用专门的库，Vue都使这个过程变得相对简单。在具体实现时，可以根据项目的特性和需求选择合适的方法。在提供的`demo`文件中，可能...
前端实现页面水印
weixin_42839080的博客
04-20 1317
前端实现页面水印的思路,先将名称画到canvas上,再将canvas生成base64图片格式作为盒子的背景图追加到页面上,其中利用pointer-events: none属性实现点击穿透.
前端添加水印
山岗下的星空的博客
03-28 1898
});// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div >${} });// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div >} });// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div >
前端如何优雅的添加水印及去除水印
最新发布
林恒的博客
07-03 915
在最近接手的一个项目中，需要对整个页面加上一个水印，还需要动态修改增加背景色功能。由于使用的第三方库不支持背景色功能，故记录一下。文末会附上如何利用技术手段去除水印。
vue 水印组件
Anonymous996的博客
05-10 2500
vue2 水印效果，使用MutationObserver监听元素结构，支持水印防篡改。
前端实现加水印
weixin_42342008的博客
04-08 3838
前端页面加水印 效果如图： 这要怎么实现呢？ 前端方案 通过canvas创建一张含有水印信息的背景图片，通过vue指令插入到页面中。 优点：方便快捷，易实现。 缺点： 容易被页面上的背景色以及背景图片遮挡 DOM元素直接遮盖、展示水印信息，覆盖在页面的最上层。 优点：对业务影响最小、不会被遮挡、配置更多、更灵活 缺点： 开发难度大、周期长 最终我们决定采用的是第二种方案 配置流程 项目中引入waterMark.js import Water
vue watermark 添加水印（防盗）
qq_40658616的博客
03-09 1630
关于设置文字的以图片的形式呈现，我们可以根据传进来的文字进行canvas绘制成图片然后以backgrund-image平铺的形式展示，实现点击穿透可以考css实现，对水印进行防删防篡改的功能需要通过MutationObserver进行监听。vue 常用ui库element-ui是没有水印功能的，下面我们就按照ant design里面水印功能进行开发vue 水印，如果说npm的插件不满足你的需求下面就是代码的开源 ，可以根据实际需求进行修改。1.设置的文字最终以图片的形式呈现。
vue2 添加水印组件,canvas水印
m0_70798249的博客
09-12 1541
功能：1、角标水印 2、全屏水印 3、添加了elementui 图片预览 4、是否可复制图片。注意：elementui的图片预览组件需要自己去nodemodels里找。组件内部代码：注意element图片预览组件的引用。
Web前端开发之水印、图片验证码
09-01
在Web前端实现水印的方法通常涉及后端技术，如在服务器端利用编程语言（如C#）中的`System.Drawing`库来处理图像。以下是一个简单的水印添加步骤： 1. **加载图像**：首先，你需要将图像数据转换为一个`System....
微信去水印小程序前端+后端
04-05
后端主要任务包括接收前端发送的请求（如上传文件、去除水印的指令），执行相应的业务逻辑，如调用图像处理算法，然后将处理结果返回给前端。同时，后端还需要与数据库进行交互，保存用户信息、处理记录等，常见的...
基于JQuery的页面水印
11-08
在前端开发中，水印可以是静态的，也可以是动态的，例如随着时间、位置或其他因素变化。 ### 三、JQuery实现水印步骤 1. **引入JQuery库**：首先，确保你的项目中已经包含了JQuery库。可以通过CDN链接或者本地文件...
去水印微信小程序（前端）
04-14
这个开源项目是一个专门用于去除图片和视频水印的微信小程序前端应用。它旨在帮助用户处理那些带有不必要标记的内容，使它们更适合分享或者个人使用。 在前端开发中，微信小程序使用了自己的一套框架和语言，包括...
vue实现添加水印（给页面添加背景水印、给图片添加水印）
weixin_41897680的博客
05-23 7000
vue实现添加水印（给页面添加背景水印、给图片添加水印）
vue 水印插件 插件：directives.js
qq_53836672的博客
12-21 1487
import Vue from 'vue' /** * author: zuokun * 水印 * text：水印文字 * font：字体 * textColor：文字颜色 * width：宽度 * height：高度 * textRotate：偏转度 -90到0， 负数值，不包含-90 */ Vue.directive('watermark',(el,binding)=>{ let text = binding.value.text; let font = bin.
【Vue】水印组件
weixin_42342065的博客
07-26 813
水印组件
Vue3水印（Watermark）
Mr Dear的博客
11-28 4278
给页面的某个区域加上水印，我保证没人能够消除篡改它！同时支持浏览器暗黑模式时水印颜色自动反转；总之，功能丰富，简单易用，总能满足你的想象 😁😁
vue项目中对所有页面or单个页面进行水印的添加
m0_65228384的博客
09-06 1185
先引入上面的js文件，部分水印内容及设置可在showMark()中进行修改，js文件中的设置更多，可自取。由于项目需要项目中的“首页”需要水印 注：甲方需求。我这里是只要跳出这个页面就销毁了这个组件，比较耗费性能。将这个js文件放入utils文件夹中。
vue项目轻松实现水印效果
油墨香^-^的博客
05-24 1087
下次遇到需要使用水印效果的时候，一定要记得vue2-water-marker，vue3-water-marker哟。加强了对水印的保护，删除或篡改水印的难度加大。
Vue 2.0中使用watermark-dom 添加水印
越陌度阡
12-10 6201
Watermark-dom是一个可以给网页添水印、移除水印的插件，并可以对水印的样式进行许多丰富的设置。 以下是在Vue中使用该插件的方式： <template> <!-- App.vue 文件--> <div id="app"> <router-view /> </div> </template> <script> // 安装文件,如果安装报错，可以用cnpm // npm
前端实现打印页面带水印功能
在前端开发中，有时我们需要在打印页面时添加自定义的水印，以保护信息或标明文档来源。这个任务可以通过JavaScript和CSS来实现。给定的代码片段中，主要使用了jQuery库和一个名为`jquery.qrcode.min.js`的插件，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值