上面的两张图片中，你能看出有什么不同吗？

右图使用 html5 canvas api 中的 getImageData 和 putImageData 函数嵌入了一段文字。

道理很简单，getImageData 函数返回一个 ImageData 对象，该对象包含三个属性： data 是一个字节数组，每 4 字节表示图片中一个像素，按照“ 红、绿、蓝、透明度”的顺序依次排列，width 表示图片宽度，height 图片高度。

只要将我们的密文转成 0 - 255 之间的数值，存入数组，然后再显示成图片。读取时反向读取并转码就可以了。



<!DOCTYPE html>

<html >

    <head>

        <meta charset="utf-8">

        <title>Hello...</title>

        <style type="text/css">

        </style>

    </head>

    <body>

        <canvas id="canvas1"></canvas>

        <script>

            var pic;

            var canvas;

            var ctx;

            var imgData;

            var data;

            window.onload = function(){

                canvas = document.getElementById("canvas1");

                ctx = canvas.getContext("2d");

                canvas.width = 400;

                canvas.height = 200;

                pic = new Image();

                pic.onload = function(){

                    ctx.drawImage(pic, 0, 0, pic.width, pic.height);

                    imgData = ctx.getImageData(0, 0, pic.width, pic.height);

                    data = imgData.data;

                    // put the secret

                    //var s = encodeURI("we dream and we build.we never give up.we never quit.");

                    var s = encodeURI("女神，约吗？");

                    for(var j=0; j<s.length; j++){

                        data[j*400+3] = 255 - s.charCodeAt(j);

                    }

                    ctx.putImageData(imgData, 130, 0);

                    //get the secret

                    var dImgData = ctx.getImageData(130, 0, pic.width, pic.height);

                    var dData = dImgData.data;

                    var ds = "";

                    for(var k=3; k<dData.length; k+=400){

                        var t = String.fromCharCode(255 - dData[k]);

                        ds += t;

                    }

                    console.log(decodeURI(ds));

                }

                pic.src = "./img/xixi.jpg";

            };

        </script>

    </body>

</html>

注: 示例代码中的密文仅仅是为了测试中文，顺路为男神读者们服务的。

HTML5中使用图片传递密文的更多相关文章

  1. HTML5中window.postMessage，在两个页面之间的数据传递

    HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功 ...

  2. HTML5 中的拖放

    今天,给大家整理一个html5 拖放. 首先,我们先了解一下什么是拖放? 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HT ...

  3. 基于html5的多图片上传，预览

    基于html5的多图片上传 本文是建立在张鑫旭大神的多文图片传的基础之上. 首先先放出来大神多图片上传的博客地址:http://www.zhangxinxu.com/wordpress/2011/09 ...

  4. HTML5中的Web Workers

    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...

  5. html5中利用FileReader来读取文件。

    利用FileReader来读取文件的能够来实现即时预览的效果,这个也是在html5中才有的功能. <!DOCTYPE html> <html lang="en"& ...

  6. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  7. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  8. UIWebView保存网页中的图片(转载)

    现在H5混合原生开发的方式越来越流行,也就要用到UIWebView控件.在开发过程中,我们可能会遇到一个需求,要求我们保存网页上的图片,当用户点击图片的时候,就可以让用户选择是否下载图片. 在系统自带 ...

  9. HTML5 CANVAS 实现图片压缩和裁切

    原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...

随机推荐

  1. titit. 深入理解 内聚（ Cohesion）原理and  attilax大总结

    atitit. 深入理解 内聚( Cohesion)原理and  attilax大总结         1.1. 内聚的概念 1 1.1.1. 高内聚模式关于这个问题给出的答案是:分配职责,使其可保持 ...

  2. ORA-01652：无法通过128(在表空间temp中)扩展temp段 解决方法

    ORA-01652:无法通过128(在表空间temp中)扩展temp段 解决方法 (2016-10-21 16:49:53)   今天在做一个查询的时候,报了一个"ORA-01652无法通过 ...

  3. Iterate Files by Tcltk

    Iterate Files by Tcltk eryar@163.com Abstract. Tcl/Tk provide a programming system for developing an ...

  4. UWP开发之Mvvmlight实践四：{x:bind}和{Binding}区别详解

    {x:bind}是随着UWP被推出而被添加的,可以说是Win10 UWP开发专有扩展.虽然 {x:Bind} 缺少{Binding} 中的一些功能,但它运行时所花费的时间和使用的内存量均比 {Bind ...

  5. MySQL Doublewrite Buffer及业务评估

    1. 关于Doublewrite Buffe的总结 Doublewrite Buffer:Doublewrite Buffer出现的初衷是防止buffer pool中的脏页刷新到磁盘中,出现部分写的问 ...

  6. 跌倒了，再爬起来：ASP.NET 5 Identity

    "跌倒了"指的是这一篇博文:爱与恨的抉择:ASP.NET 5+EntityFramework 7 如果想了解 ASP.NET Identity 的"历史"及&q ...

  7. 关于opencv中人脸识别主函数的部分注释详解。

    近段时间在搞opencv的视频人脸识别,无奈自带的分类器的准确度,实在是不怎么样,但又能怎样呢?自己又研究不清楚各大类检测算法. 正所谓,功能是由函数完成的,于是自己便看cvHaarDetectObj ...

  8. 使用openfiler设置SMB/CIFS共享总是不通过的一例与解决办法

    最近使用openfiler进行空闲存储的集中化管理与多主机节点共享,等设置到了SMB/CIFS的时候总是通过不了,前提需要开启的LDAP内建在openfiler也都开启并设置好了,但就是无法通过&qu ...

  9. 深入seajs源码系列三

    入口方法 每个程序都有个入口方法,类似于c的main函数,seajs也不例外.系列一的demo在首页使用了seajs.use(),这便是入口方法.入口方法可以接受2个参数,第一个参数为模块名称,第二个 ...

  10. ZOJ Problem Set - 1402 Magnificent Meatballs

    比较简单的题目,题目大意就是将n个数字围成一个圈,找到一个划分,是的划分左边的数字之和等于右边的数字之和: e.g 10 1 2 2 5,那么可以找到一个划分10 | 1 2 2 5使得两边数字之和都 ...