前端水印的简单实现代码示例


Posted in HTML / CSS onDecember 02, 2020

前言

前端实现的水印基本都是不安全的,可被破解的~.~

水印

水印(watermark)是一种容易识别、被夹于纸内,能够透过光线穿过从而显现出各种不同阴影的技术。

实现

先创建一个 wrap 块,并给其设置一些样式:

<div class="wrap1 wrap_common"></div>

<style>
* {
  margin: 0; 
  padding: 0; 
}
.wrap_common {
  position: relative; 
  margin: 0 auto; 
  width: 800px; 
  height: 44vh; 
  border: 1px solid rgba(0, 0, 0, 1); 
  background: rgba(255, 255, 255, 1); 
  overflow: hidden; 
}
.wrap_common:first-child{
  margin-bottom: 5vh; 
}
</style>

1. DIV绝对定位

通过图层叠加的方式将水印追加到 wrap 上,我们先看一下最终效果

前端水印的简单实现代码示例

动态获取到 wrap 的长宽并计算其能放几个水印块,并相应的设置每一个水印块的偏移值 left,top即可:

const wrap = document.querySelector('.wrap1');
const { clientWidth, clientHeight } = wrap;
const waterHeight = 100;
const waterWidth = 180;
// 能放下几行几列
const [columns, rows] = [Math.ceil(clientWidth / waterWidth), Math.ceil(clientHeight / waterHeight)]
for (let i = 0; i < columns; i++) {
  for (let j = 0; j <= rows; j++) {
    // 生成水印块
    const watcerMarkElement = createWaterMarkElement();
    // 动态设置偏移值
    addAttributes(watcerMarkElement, {
      width: `${waterWidth}px` ,
      height: `${waterHeight}px` ,
      left: `${waterWidth + (i - 1) * waterWidth + 10}px` ,
      top: `${waterHeight + (j - 1) * waterHeight + 10}px` ,
    });
    wrap.appendChild(watcerMarkElement)
  }
}

2. canvas+背景图

我们知道,可以给 div 设置样式 background,我们可以很轻松的实现背景图片,那么水印也可以通过这种方式来实现,其中背景图片通过 canvas 画出来,并且通过 toDataURL() 将图片转为 dataURL(base64),最后追加到 background-image 样式中。

const wrap = document. querySelector('. wrap2'); 
wrap.style.backgroundImage = `url(${drawWaterMark()})` ;

drawWaterMark 方法实现如下 :

const drawWaterMark = (text = '小豪看世界') => {
  const sin = Math.sin(Math.PI / 4.5);
  const cos = Math.cos(Math.PI / 4.5);
  const canvas = document.createElement('canvas')
  canvas.width = 200;
  canvas.height = 100;
  const ctx = canvas.getContext('2d');
  ctx.transform(cos, -sin, sin, cos, 0, 0);
  ctx.font = '16px';
  ctx.fillStyle = 'rgba(0,0,0,.4)';
  ctx.fillText(text, 80, 140);
  ctx.fillText(text, -30, 100);
  return canvas.toDataURL('image/png')
};

前端水印的简单实现代码示例

我们可以看到 wrap 插入了一个 base64的图片,强迫症的童鞋可以处理一下,将它转为 style 标签插入到body中;

改为 style 标签插入:

const style = document. createElement('style'); 
style.type = 'text/css'; 
style.innerHTML = `
  .wrap2 {
    background-image: url(${drawWaterMark()});
  }
`; 
document.body.appendChild(style);

emmm,看起来美观一点了~.~

前端水印的简单实现代码示例

参考

从破解某设计网站谈前端水印(详细教程)

源码

源码

到此这篇关于前端水印的简单实现代码示例的文章就介绍到这了,更多相关前端水印内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 #HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 #HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 #HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 #HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 #HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 #HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 #HTML / CSS
You might like
在普通HTTP上安全地传输密码
2007/07/21 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php缓存技术详细总结
2013/08/07 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
JS继承用法实例分析
2015/02/05 Javascript
js运动应用实例解析
2015/12/28 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
pip安装python库的方法总结
2019/08/02 Python
python实现图片插入文字
2019/11/26 Python
python装饰器原理与用法深入详解
2019/12/19 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
python SOCKET编程基础入门
2021/02/27 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
财务经理岗位职责范本
2015/04/08 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技