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


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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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
PHP递归调用的小技巧讲解
2013/02/19 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
详解python开发环境搭建
2016/12/16 Python
用pycharm开发django项目示例代码
2019/06/13 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
什么是.net
2015/08/03 面试题
优秀共产党员先进事迹
2014/01/27 职场文书
网络营销策划方案
2014/06/04 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
毕业实习计划书
2015/01/16 职场文书
如何用python绘制雷达图
2021/04/24 Python