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

右图使用 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. python安装locustio报错error: invalid command 'bdist_wheel'的解决方法

    locust--scalable user load testing tool writen in Python(是用python写的.规模化.可扩展的测试性能的工具) 安装locustio需要的环境 ...

  2. iOS开发-应用崩溃日志揭秘（一）

    作为一名应用开发者,你是否有过如下经历? 为确保你的应用正确无误,在将其提交到应用商店之前,你必定进行了大量的测试工作.它在你的设备上也运行得很好,但是,上了应用商店后,还是有用户抱怨会闪退 ! 如果 ...

  3. Android笔记——SQLiteOpenHelper类

    public 抽象类 SQLiteOpenHelper 继承关系 Java.lang.Object android.database.sqlite.SQLiteOpenHelper 类概要 这是一个辅 ...

  4. iOS常见用户头像的圆形图片裁剪常见的几种方法

    在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...

  5. c#方法

    1.引用型参数: 关键字:ref 2.输出型参数 关键字:out 例: double area(out double p) { double t=3.14*10; p=2*t*3.14; return ...

  6. SQL语句来查询今天、昨天、7天内、30天的数据，经典！

    ---恢复内容开始--- 今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0 昨天的所有数据:select * f ...

  7. TSQL 聚合函数忽略NULL值

    max,min,sum,avg聚合函数会忽略null值,但不代表聚合函数不返回null值,如果表为空表,或聚合列都是null,则返回null.count 聚合函数忽略null值,如果聚合列都是null ...

  8. sizzle分析记录：关于querySelectorAll兼容问题

    querySelector和querySelectorAll是W3C提供的新的查询接口 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.O ...

  9. 安装CentOS、Linux系统时,GPT分区不能引导的解决方法

    安装系统:CentOS 5.9_64bit时,分区后, 提示如下错误. 解决方法: 1.按ctrl+alt+F2 进入命令行 2.先查看分区 sh #fdisk -l    以下假设分区是/dev/s ...

  10. Android文件下载之进度检测

    近期因为项目的需要,研究了一下Android文件下载进度显示的功能实现,接下来就和大家一起分享学习一下,希望对广大初学者有帮助. 先上效果图: 上方的蓝色进度条,会根据文件下载量的百分比进行加载,中部 ...