请选择 进入手机版 | 继续访问电脑版

猫先森网络资源站

 找回密码
 立即注册
查看: 891|回复: 167

[HTML/Xhtml] 前端使用canvas生成盲水印的加密解密的实现

  [复制链接]
等级头衔

等級:论坛元老

Rank: 8Rank: 8

积分成就
积分
2956
金钱
45
人气
45
贡献
2911
主题
2911
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2020-12-16 15:52:05 | 显示全部楼层 |阅读模式
这篇文章主要介绍了前端使用canvas生成盲水印的加密解密的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
                                       
                                               
                                               
                                       
                                       
                                                为了保障信息安全,防止重大信息泄露,并且能够锁定泄露用户,需要对页面展示的图片加入当前用户信息的盲水印,即最终图片外观看起来和原图一样,但是经过解码以后可以识别出水印信息,并且在截图后仍能进行较好的识别。
经过在网上的学习摸索,看了几位大神的博客以后,我也总结一下自己的代码,分享一下学习经验。
我们将使用以下图片作为原图进行示范:

2020121615445746.png

2020121615445746.png


下面是图片添加盲水印的代码:


至此,我们在页面上绘制出了带有盲水印的图片,我们先看看解码前后对比效果:
以下是右键另存为的图片及解码后的图片,受色彩识别度的误差影响,会有部分图片内容也被识别成水印内容,不过还是可以比较清晰看到水印文字

2020121615445747.png

2020121615445747.png


2020121615445748.png

2020121615445748.png


以下是使用屏幕截图的图片及解码图片:截图后的图片仍然能够识别出水印信息

2020121615445749.png

2020121615445749.png


2020121615445750.png

2020121615445750.png


接下来是水印解码的js代码:


现在,我们基本已经完成了前期预计的盲水印效果,但是,前端的安全处理还是会有隐患,比如打开控制台,即可获取到原图的链接地址,并可以直接保存。
所以若要更好的保障信息安全,这个添加盲水印的方法在后端去处理可能更加有效。
本文算法内容参考自: https://juejin.cn/post/6900713052270755847
到此这篇关于前端使用canvas生成盲水印的加密解密的实现的文章就介绍到这了,更多相关canvas生成盲水印加密解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-15 21:48:42 | 显示全部楼层
投脚本之家楼主一票,不用谢哦!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-16 16:31:27 | 显示全部楼层
顶一下,收藏了!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
1
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-4-13

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-16 19:57:24 | 显示全部楼层
脚本之家楼主今年多大了?

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-16 20:04:31 | 显示全部楼层
很经典,收藏了!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
2
金钱
0
人气
0
贡献
1
主题
1
精华
0
猫币
1
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-16 20:10:09 | 显示全部楼层
看了这么多帖子,第一次看到这么有深度了!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-16 20:21:33 | 显示全部楼层
感觉不错!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
1
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-4-13

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-16 23:07:02 | 显示全部楼层
好帖子!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
2
金钱
2
人气
0
贡献
1
主题
1
精华
0
猫币
1
违规
0
注册时间
2021-1-14
最后登录
2021-4-13

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-16 23:49:21 | 显示全部楼层
哥回复的不是帖子,是寂寞!

回复

使用道具 举报

等级头衔

等級:新手上路

Rank: 1

积分成就
积分
0
金钱
0
人气
0
贡献
0
主题
0
精华
0
猫币
0
违规
0
注册时间
2021-1-14
最后登录
2021-1-14

快捷版块
版块
网站源码
版块
游戏源码
版块
商业源码
版块
SEO新闻
版块
SEO教程
版块
SEO程序
功能
猫币提现

发表于 2021-3-17 00:04:45 | 显示全部楼层
写得实在太好了,我唯一能做的就是默默顶贴!

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表