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

右图使用 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. 在UWP中页面滑动导航栏置顶

    最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...

  2. Trace Flag

    Trace Flag能够影响Sql Server的行为,主要用于diagnose performance issue,官方解释是: Trace flags are used to temporaril ...

  3. Utility2：Appropriate Evaluation Policy

    UCP收集所有Managed Instance的数据的机制,是通过启用各个Managed Instances上的Collection Set:Utility information(位于Managem ...

  4. 简单测试nginx1.90做TCP协议负载均衡的功能

    最近工作中需要做TCP层面的负载均衡,以前网站用的反向代理nginx只支持应用层的负载均衡,对于TCP协议是无能为力的,需要使用LVS(linux虚拟服务器). LVS的特点是高性能和极复杂的配置.对 ...

  5. 关于Repository、IUnitOfWork 在领域层和应用服务层之间的代码分布与实现

    本来早就准备总结一下关于Repository.IUnitOfWork之间的联系以及在各层中的分布,直到看到田园里的蟋蟀发表的文章:<DDD 领域驱动设计-谈谈 Repository.IUnitO ...

  6. 1Z0-053 争议题目解析698

    1Z0-053 争议题目解析698 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 698.In your production database, you: -Are using ...

  7. 1Z0-053 争议题目解析707

    1Z0-053 争议题目解析707 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 707.Because of a logical corruption in the EMPLOY ...

  8. 相克军_Oracle体系_随堂笔记014-锁 latch,lock

    1.Oracle锁类型 2.行级锁:DML语句 3.表级锁:TM 4.锁的兼容性 5.加锁语句以及锁的释放 6.锁相关视图 7.死锁 1.Oracle锁类型 锁的作用     latch锁:chain ...

  9. JS去除空格方法记录

    JS中去掉空格 //去除空格  String.prototype.Trim = function() {      return this.replace(/\s+/g, ""); ...

  10. WebService入门案例

    关于WebService的作用和好处,大家应该都了解.但如何在Asp.Net中添加Web Service等问题一直是新手朋友的一大难题.鉴于网上没有一个像样的实际案例,特将课程设计中运用到的WebSe ...