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


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制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 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 zip文件解压类代码
2009/12/02 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
php图片缩放实现方法
2014/02/20 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
Python字符编码判断方法分析
2016/07/01 Python
python正则表达式面试题解答
2020/04/28 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
python实现批处理文件
2020/07/28 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
土建工程师岗位职责
2014/06/10 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS