前端使用canvas生成盲水印的加密解密的实现


Posted in HTML / CSS onDecember 16, 2020

为了保障信息安全,防止重大信息泄露,并且能够锁定泄露用户,需要对页面展示的图片加入当前用户信息的盲水印,即最终图片外观看起来和原图一样,但是经过解码以后可以识别出水印信息,并且在截图后仍能进行较好的识别。

经过在网上的学习摸索,看了几位大神的博客以后,我也总结一下自己的代码,分享一下学习经验。

我们将使用以下图片作为原图进行示范:

前端使用canvas生成盲水印的加密解密的实现

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

<script>
        var canvas = document.getElementById("myCanvas")
        var ctx = canvas.getContext("2d")
        var img = new Image();
        var textData,originalData;
        img.src = './codeImg.png'
        //图片加载完成
        img.onload = function(){
            //设置画布宽高为图片宽高
            canvas.width = img.width;
            canvas.height = img.height;
            //设置水印字体
            ctx.font = '30px Microsoft Yahei';
            //由于图片宽度固定为800,我们需要在每一行添加三个水印,每隔100像素新增一行水印
            for(var i=50;i<canvas.height;i+=100){
                ctx.fillText('周杰伦', 100, i);
                ctx.fillText('周杰伦', 300, i);
                ctx.fillText('周杰伦', 600, i);
            }
            
            //此时画布上已经有了水印的信息,我们获取水印的各个像素的信息
            textData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
            //将图片绘入画布
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            //获取图片各个像素点的信息,将originalData打印出来,会发现是一个非常大的数组(由于文字和图片在同一块画布,因此textData的长度等于originalData长度)
            //这个数组的长度等于图片width*height*4,即图片像素宽乘以高乘以4,0-3位是第一个点的RGBA值,第4-7位是第二个点的RGBA值,以此类推
            originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
            //调用盲水印算法
            mergeData(ctx, textData, 'R', originalData)
        }

        function mergeData(ctx, textData, color, originalData) {
            var oData = originalData.data;
            var newData = textData.data
            var bit, offset;  // offset的作用是找到结合bit找到对应的A值,即透明度
        
            switch (color) {
                case 'R':
                    bit = 0;
                    offset = 3;
                    break;
                case 'G':
                    bit = 1;
                    offset = 2;
                    break;
                case 'B':
                    bit = 2;
                    offset = 1;
                    break;
            }
        
            for (var i = 0; i < oData.length; i++) {
                //此处是为了筛选我们要修改的RGB中那一项,在此处,过滤出来的就是每个坐标点的R值
                if (i % 4 == bit) {
                    
                    //我们获取到R值的位置,那对应这个点的A值就是i+offset
                    if (newData[i + offset] === 0 && (oData[i] % 2 === 1)) {
                        //此处先判断该坐标点的透明度,如果为0,说明这个点是没有水印的,将没有水印信息点的R值变为偶数,并且不能超过0-255的范围
                        if (oData[i] === 255) {
                            oData[i]--;
                        } else {
                            oData[i]++;
                        }
                    } else if (newData[i + offset] !== 0 && (oData[i] % 2 === 0)) {
                        //透明度非0,该点有信息,若该点的R值是偶数,将其改为奇数
                        oData[i]++;
                    }
                }
            }
            //至此,整个图片中所有包含水印信息的点的R值都是奇数,没有水印信息的点的R值都是偶数,再将图片绘入画布,即完成整个水印添加过程
            ctx.putImageData(originalData, 0, 0);
        }

    </script>

至此,我们在页面上绘制出了带有盲水印的图片,我们先看看解码前后对比效果:

以下是右键另存为的图片及解码后的图片,受色彩识别度的误差影响,会有部分图片内容也被识别成水印内容,不过还是可以比较清晰看到水印文字

前端使用canvas生成盲水印的加密解密的实现 

前端使用canvas生成盲水印的加密解密的实现

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

前端使用canvas生成盲水印的加密解密的实现 

前端使用canvas生成盲水印的加密解密的实现

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

<script>
        var canvas = document.getElementById("myCanvas")
        var ctx = canvas.getContext("2d")
        var img = new Image()
        img.src = './decode.png'
        // 图片加载完成
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);

            // 将带有盲水印的图片绘入画布,获取到像素点的RGBA数组信息
            originalData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
            
            processData(ctx,originalData);
        }

        function processData(ctx, originalData) {
            var data = originalData.data;
            for (var i = 0; i < data.length; i++) {
                //筛选每个像素点的R值
                if (i % 4 == 0) {
                    if (data[i] % 2 == 0) {//如果R值为偶数,说明这个点是没有水印信息的,将其R值设为0
                        data[i] = 0;
                    } else {//如果R值为奇数,说明这个点是有水印信息的,将其R值设为255
                        data[i] = 255;
                    }
                } else if (i % 4 == 3) {//透明度不作处理
                    continue;
                } else {
                    // G、B值设置为0,不影响
                    data[i] = 0;
                }
            }
            // 至此,带有水印信息的点都将展示为255,0,0   而没有水印信息的点将展示为0,0,0  将结果绘制到画布
            ctx.putImageData(originalData, 0, 0);
        }
    </script>

现在,我们基本已经完成了前期预计的盲水印效果,但是,前端的安全处理还是会有隐患,比如打开控制台,即可获取到原图的链接地址,并可以直接保存。

所以若要更好的保障信息安全,这个添加盲水印的方法在后端去处理可能更加有效。

本文算法内容参考自: https://juejin.cn/post/6900713052270755847

到此这篇关于前端使用canvas生成盲水印的加密解密的实现的文章就介绍到这了,更多相关canvas生成盲水印加密解密内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 #HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 #HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 #HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 #HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 #HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 #HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 #HTML / CSS
You might like
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python实现在控制台输入密码不显示的方法
2015/07/02 Python
jupyter安装小结
2016/03/13 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python3 Random模块代码详解
2017/12/04 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
法律进学校实施方案
2014/03/15 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
干部鉴定材料
2014/05/18 职场文书
家属慰问信
2015/02/14 职场文书
公司财务部岗位职责
2015/04/14 职场文书
学生退学证明
2015/06/23 职场文书
保险公司增员口号
2015/12/25 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang