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

右图使用 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. Nginx服务器之 Nginx的基本配置

    本文使用 Linux centos系统 一.Nginx虚拟主机的配置 虚拟主机:通常情况下,为了使每个服务器可以供更多用户使用,可以将一个服务器分为很多虚拟的子服务器,每个子服务器都是互相独立的.这些 ...

  2. LINQ to Entities 不支持 LINQ 表达式节点类型“ArrayIndex”

    我就不屁话,能一张图就解决的就不说话了 2015-03-28 14:53:24,440 [10] ERROR log - System.NotSupportedException: LINQ to E ...

  3. 深入理解脚本化CSS系列第五篇——动态样式

    前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...

  4. Hawk 3.1 动态页面,ajax,瀑布流

    不少朋友反映,Hawk的手气不错,好像没法处理动态页面.其实很容易,比其他软件都容易,让我慢慢道来. 1. 什么是动态页面 很多网站,在刷新的时候会返回页面的全部内容,但实际上只需要更新一部分,这样可 ...

  5. 窥探Swift之协议(Protocol)和委托代理(Delegate)回调的使用

    协议与委托代理回调在之前的博客中也是经常提到和用到的在<Objective-C中的委托(代理)模式>和<iOS开发之窥探UICollectionViewController(四) - ...

  6. position:fixed和scroll实现div浮动【示例】

    前言 在自己建站的过程中,要实现一个div随滚动条浮动的效果,网上找了些示例不太好用,还是自己动手,丰衣足食,写的不好请大家谅解,毕竟我不是搞前端的,因为自己建站毕竟每一步都必须自己来,这边只是做个记 ...

  7. geotrellis使用（十一）实现空间数据库栅格化以及根据属性字段进行赋值

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 安装空间数据库 空间数据库栅格化 根据属性字段进行赋 ...

  8. C语言 第四章 关系、逻辑运算与分支流程控制

    一.关系运算 若干表达式用关系运算符连接而成,就构成关系表达式. 关系表达式中,表达式成立,其值为1(真):表达式不成立,其值为0(假).其他表达式中,其结果如果是非0则为真,结果为0则为假. 关系运 ...

  9. jQuery的事件模型

    前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型. jQuery的事件系统离不开jQuery的缓存系统. jQuery的第一代缓存是直接 ...

  10. Cesium应用篇：2影像服务（下）

    文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码 823d 上篇主要介绍了Cesium自带的影像Provider ,在本篇中,我们主要涉及到如何扩展这些 ...