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

右图使用 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. Linux Hadoop2.7.3 安装(单机模式) 二

    Linux Hadoop2.7.3 安装(单机模式) 一 Linux Hadoop2.7.3 安装(单机模式) 二 YARN是Hadoop 2.0中的资源管理系统,它的基本设计思想是将MRv1中的Jo ...

  2. kafka 安装出现的几个问题

    1.安装kafka的过程出现两个问题 1)错误: 找不到或无法加载主类 kafka.Kafka 原因:    下载的是源码包,需要编译.可以下载Binary downloads: 2) ERROR I ...

  3. Android Fragment 使用技巧

    1. Fragment 使用时要有一个无参构造函数 如果没有无参构造函数,而是像按照普通类来使用,只创建有参构造函数,则会出现 android.support.v4.app.Fragment$Inst ...

  4. 路由转发过程的IP及MAC地址变化

    A-----(B1-B2)-----(C1-C2)-------E就假设拓扑图是这个样子吧,B1和B2是路由器B上的两个接口,C1和C2是路由器C上的两个接口,A和E是PC,由主机A向主机E发送数据包 ...

  5. sizzle分析记录: 自定义伪类选择器

    可见性 :hidden :visible 隐藏对象没有宽高,前提是用display:none处理的 jQuery.expr.filters.hidden = function( elem ) { // ...

  6. 轻量级前端MVVM框架avalon - 模型转换

    接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { ...

  7. Android获取可存储文件所有路径

    引言:大家在做app开发的时候,基本都会保存文件到手机,android存储文件的地方有很多,不像ios一样,只能把文件存储到当前app目录下,并且android手机由于厂家定制了rom,sdcard的 ...

  8. android app反编译

    最新在反编译别人的apk,有时候看到别人的app有很炫的效果,就想知道别人是怎么样实现的,顺便自己参考,借鉴一下,下一次如果工作中碰到这个问题就知道怎么实现了.最近恰好放假三天,就研究了一下,一般别人 ...

  9. android给View设置上下左右边框

    给View控件设置边框,可以动态设置上下左右.通过布局文件就能搞定 1.在drawable文件夹下新建一个shape_main_list_bg.xml文件 <layer-list xmlns:a ...

  10. Android随笔之——Activity中启动另一应用

    最近在写语音交互程序,在语音打开应用这块碰到如何用代码控制应用启动的问题.百度了一下,有两种方案:1.获取应用的包名:2.获取应用的包名.入口类名. 之前对两种方案都进行了尝试,发现方案二中存在一个弊 ...