前端技术图解(前端水印的简单实现代码示例)
类别:Web前端 浏览量:1978
时间:2021-10-22 07:16:25 前端技术图解
前端水印的简单实现代码示例前言
前端实现的水印基本都是不安全的,可被破解的~.~
水印
水印(watermark)是一种容易识别、被夹于纸内,能够透过光线穿过从而显现出各种不同阴影的技术。
实现
先创建一个 wrap 块,并给其设置一些样式:
<li class="wrap1 wrap_common"></li> <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. li绝对定位
通过图层叠加的方式将水印追加到 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+背景图
我们知道,可以给 li 设置样式 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.jpg" alt="前端技术图解(前端水印的简单实现代码示例)" border="0" />
我们可以看到 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,看起来美观一点了~.~
参考
从破解某设计网站谈前端水印(详细教程)
源码
源码
到此这篇关于前端水印的简单实现代码示例的文章就介绍到这了,更多相关前端水印内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- canvas小程序海报(使用canvas生成含有微信头像的邀请海报没有微信头像问题)
- canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)
- 小程序canvas不显示(小程序canvas中文字设置居中锚点)
- html5中canvas标签(html5 canvas绘制网络字体的常用方法)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- canvas宽高技巧(canvas画图被放大且模糊的解决方法)
- canvas绘图画圆基本步骤(利用 Canvas实现绘画一个未闭合的带进度条的圆环)
- html5 canvas 性能(基于html5 canvas做批改作业的小插件)
- js使用canvas(JavaScript canvas实现七彩时钟效果)
- canvas绘制动态线条(5分钟实现Canvas鼠标跟随动画背景)
- html5的canvas图形绘制技术(详解HTML5 Canvas标签及基本使用)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- canvas3d效果(JavaScript canvas实现七彩太阳光晕效果)
- canvas技术开发(用canvas显示验证码的实现)
- canvas跟随鼠标绘制(如何在Canvas上的图形/图像绑定事件监听的实现)
- 于正又推女性古装大剧 杨蓉乔欣演女配,两位女主成 重头戏(于正又推女性古装大剧)
- 乔欣古装女主戏获热度 作为女主,却没吃到红利(乔欣古装女主戏获热度)
- 爱情是什么(爱情是什么最经典的话)
- 乔欣 古装剧中的高颜值(古装剧中的高颜值)
- 怎么才可以财富自由(如何让自己实现财富自由)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
热门推荐
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- apache漏洞怎么排查(apache urlrewrite防盗链功能配置)
- sql怎么查询字段合并(SQL函数将某个字段合并在一起的操作)
- wampserver命令行进不去(Win10无法启动wampserver怎么办)
- dedecms标签工具(开启DedeCMS软件源码及分类信息采集功能的方法)
- 非关系型数据库和关系型数据库(关系型数据库与非关系型数据库简介)
- html元素和属性的区别(HTML5 HTMLCollection和NodeList的区别详解)
- mysql必背知识点高级(MySQL 8.0 Online DDL快速加列的相关总结)
- php的字符串表达方法(php中字符串和整数比较的操作方法)
- docker进入容器内部后的命令(Docker部署Consul配置过程解析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9