代码=图片

图片=代码

JS代码对于喜欢F12的同志来说，连个遮羞布都没有。。。

虽然把代码变成图片也仅仅只是增加一层纱布而已。。。但这方法还是挺好玩的，而且代码也被压缩了一点。

第一次看到[图片=代码]的想法，是在一个演示视屏拼图的博客里看到的。

最近有点闲，想起了这个，就试了试。

对于中文等字符，需要先转为十六禁止后，再转为图片的RGB像素

document.write(escape("字") );  //%u5B57

document.write(unescape("%u5B57"));

---

在线地址：

http://wangxinsheng.herokuapp.com/imageData

完整未压缩，未混淆免费代码：

http://download.csdn.net/detail/wangxsh42/8551511

下面的是jquery 1.9.1的代码图片：

---

代码段：

HTML:

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <meta name="description" content="html5 js2png">

         <meta name="keywords" content="html5,canvas,png,js">

         <meta name="author" content="WangXinsheng">

         <title>CopyRight&copy;WangXinsheng</title>

         <script src="jquery-1.9.1.min.js"></script>

         <style type="text/css">

         </style>

     </head>

     <body>

     <p>

     javascript:<br />

         <textarea id='js' rows="5" cols="50">

 function a(arg){alert(arg)};

 a("hello world!");</textarea>

         <br />

         <button id='topng' type="button">2png</button>

         <button id='tojs' type="button">2js</button>

         <button id='canvastoimg' type="button">c2img</button>

         <button id='runjs' type="button">run Js</button>

         <button id='clear' type="button">clear</button>

     </p>

     <p>

     picture:<br />

         <input id='pngFile' type="file" onchange="onPngFileChange(this)" /><br />

         <canvas id="png" width='10' height='10'></canvas>

         <img id="pngImg" />

     </p>

     </body>

     <script src="data:imageData.js"></script>

 </html>

JS:

 //将js代码编码为图片

 function toPng(jsorg){

     var canvas  = document.getElementById("png");

     var context = canvas.getContext("2d");

     var width  = Math.ceil(Math.sqrt(jsorg.length / 3));

     var height = width;

     $("#png").attr("width",width).attr("height",height);

     $("#png").width(width).height(height);

     var imageData = context.createImageData(width, height);

     var a = stringToHex(jsorg);

     var arr = a.split(",");

     for(var i = 0,j=0;j<width*height*4;i++,j++){

         if((j+1)%4==0){

             imageData.data[j]=255;

             j++;

         }

         if(i<arr.length)

             imageData.data[j] = arr[i];

     }

 //console.log(imageData.data);

     context.putImageData(imageData, 0, 0);

 }
 //解析图片为js代码

 function tojs(canvasId){

     var canvas  = document.getElementById(canvasId);

     var context = canvas.getContext("2d");

     var width  = $("#"+canvasId).width();

     var height = $("#"+canvasId).height();

     var imageData = context.getImageData(0, 0, width, height);

 //console.log(imageData.data);

     var str = "";

     for(var i = 0;i<imageData.data.length;i++){

         if((i+1)%4==0)

             continue;

         str += imageData.data[i]!=0?hexToString(imageData.data[i]):'';

     }

     $("#js").val(str);

 }

也可以添加私钥加密功能[添偏移量即可]

---

原理：

字符可以转为16进制，与图片RGB的一个R/G/B相对应，即一个像素点可容纳3个字符

注：Canvas的RGBA，透明度A似乎不能使用，使用后，RGB会有所变化，造成无法正确解码。

具体原理可参考：http://www.qingdou.me/2170.html

[实现]Javascript代码的另一种压缩与加密方法——代码图片转换的更多相关文章

  1. iOS里常见的几种信息编码、加密方法简单总结

    一.MD5 MD5编码是最常用的编码方法之一,是从一段字符串中通过相应特征生成一段32位的数字字母混合码. MD5主要特点是 不可逆,相同数据的MD5值肯定一样,不同数据的MD5值不一样(也不是绝对的 ...

  2. javascript四种类型识别的方法

    × 目录 [1]typeof [2]instanceof [3]constructor[4]toString 前面的话 javascript有复杂的类型系统,类型识别则是基本的功能.javascrip ...

  3. [转]Javascript removeChild()删除节点及删除子节点的方法(同样适用于jq)

    Javascript removeChild()删除节点及删除子节点的方法 这篇文章主要介绍了Javascript removeChild()删除节点及删除子节点的方法的相关资料,需要的朋友可以参考下 ...

  4. Python解压ZIP、RAR等常用压缩格式的方法

    解压大杀器 首先祭出可以应对多种压缩包格式的python库:patool.如果平时只用基本的解压.打包等操作,也不想详细了解各种压缩格式对应的python库,patool应该是个不错的选择. pato ...

  5. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  6. CSS, JavaScript 压缩, 美化, 加密, 解密

    CSS, JavaScript 压缩, 美化, 加密, 解密 JS压缩, CSS压缩, javascript compress, js在线压缩,javascript在线压缩,css在线压缩,YUI C ...

  7. 2016年学习JavaScript是怎样的一种体验（转）

    转自:http://www.zcfy.cc/article/how-it-feels-to-learn-javascript-in-2016-hacker-noon-1871.html 在这篇文章的写 ...

  8. javascript中数组的22种方法 （转载）

    前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详 ...

  9. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

随机推荐

  1. 【目录】Matlab和C#混合编程文章目录

    本博客所有文章分类的总目录链接:[总目录]本博客博文总目录-实时更新 1.Matlab和C#混合编程文章目录 9.接触Matlab10年后的一个总结,随时使用Matlab要掌握的一些要点 8.国内第一 ...

  2. Javaweb -- ServletContextListener

    当启动web应用后端服务时,有时需要预先从数据库或者配置文件等读取信息来配置一些全局变量之类的 这时可以用ServletContextListener,在启动服务时,加载设置基本配置 实现如下: (1 ...

  3. Fiddler的学习

    以下内容转自:http://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html 仅为查找方便而复制~~ Fiddler是最强大最好用的We ...

  4. C#编写简单的聊天程序

    这是一篇基于Socket进行网络编程的入门文章,我对于网络编程的学习并不够深入,这篇文章是对于自己知识的一个巩固,同时希望能为初学的朋友提供一点参考.文章大体分为四个部分:程序的分析与设计.C#网络编 ...

  5. SQL查询~ 存在一个表而不在另一个表中的数据

    A.B两表,找出ID字段中,存在A表,但是不存在B表的数据.A表总共13w数据,去重后大约3W条数据,B表有2W条数据,且B表的ID字段有索引. 方法一 使用 not in ,容易理解,效率低  ~执 ...

  6. 纯JS实现可拖拽表单

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

  7. Azure PowerShell (1) PowerShell整理

    <Windows Azure Platform 系列文章目录> 把之前Azure ASM的PowerShell都整理好了. https://github.com/leizhang1984/ ...

  8. Elasticsearch 数据搜索篇·【入门级干货】

    ES即简单又复杂,你可以快速的实现全文检索,又需要了解复杂的REST API.本篇就通过一些简单的搜索命令,帮助你理解ES的相关应用.虽然不能让你理解ES的原理设计,但是可以帮助你理解ES,探寻更多的 ...

  9. Go语言接口

    接口是面向对象的必备属性之一,即便是像C语言这种面向过程的语言也可以通过指向函数的指针来实现接口.我们熟知的面向对象语言中更是少不了接口.最近闲了下来,又可以开始学习Go语言了,发现Go语言的接口吸收 ...

  10. WinForm GDI+ 资料收集

    UI(User Interface)编程在整个项目开发过程中是个颇为重要的环节,任何好的解决方案若没有良好的用户界面呈现给最终用户,那么就算包含了最先进的技术也不能算是好程序.UI编程体现在两个方面, ...