[实现]Javascript代码的另一种压缩与加密方法——代码图片转换

2024-04-27 14:11:28

字体：大中小

来源：转载

供稿：网友

[实现]javascript代码的另一种压缩与加密方法——代码图片转换

代码=图片

图片=代码

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

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

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

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

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

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

---

在线地址：

http://wangxinsheng.herokuapp.com/imageData

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

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

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

---

代码段：

HTML:

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="utf-8"> 5         <meta name="description" content="html5 js2png"> 6         <meta name="keyWords" content="html5,canvas,png,js"> 7         <meta name="author" content="WangXinsheng"> 8         <title>CopyRight&copy;WangXinsheng</title> 9         <script src="jquery-1.9.1.min.js"></script>10         <style type="text/CSS">11         </style>12     </head>13     <body>14     <p>15     Javascript:<br />16         <textarea id='js' rows="5" cols="50">17 function a(arg){alert(arg)};18 a("hello world!");</textarea>19         <br />20         <button id='topng' type="button">2png</button>21         <button id='tojs' type="button">2js</button>22         <button id='canvastoimg' type="button">c2img</button>23         <button id='runjs' type="button">run Js</button>24         <button id='clear' type="button">clear</button>25     </p>26     <p>27     picture:<br />28         <input id='pngFile' type="file" onchange="onPngFileChange(this)" /><br />29         <canvas id="png" width='10' height='10'></canvas>30         <img id="pngImg" />31     </p>32     </body>33     <script src="imageData.js"></script>34 </html>

View Code

JS:

 1 //将js代码编码为图片 2 function toPng(jsorg){ 3     var canvas  = document.getElementById("png"); 4     var context = canvas.getContext("2d"); 5     var width  = Math.ceil(Math.sqrt(jsorg.length / 3)); 6     var height = width; 7     $("#png").attr("width",width).attr("height",height); 8     $("#png").width(width).height(height); 9     var imageData = context.createImageData(width, height);10     11     var a = stringToHex(jsorg);12     var arr = a.split(",");13     for(var i = 0,j=0;j<width*height*4;i++,j++){14         if((j+1)%4==0){15             imageData.data[j]=255;16             j++;17         }18         if(i<arr.length)19             imageData.data[j] = arr[i];20     }21 //console.log(imageData.data);22     context.putImageData(imageData, 0, 0);23 }

 1 //解析图片为js代码 2 function tojs(canvasId){ 3     var canvas  = document.getElementById(canvasId); 4     var context = canvas.getContext("2d"); 5     var width  = $("#"+canvasId).width(); 6     var height = $("#"+canvasId).height(); 7     var imageData = context.getImageData(0, 0, width, height); 8 //console.log(imageData.data); 9     var str = "";10     for(var i = 0;i<imageData.data.length;i++){11         if((i+1)%4==0)12             continue;13         str += imageData.data[i]!=0?hexToString(imageData.data[i]):'';14     }15     $("#js").val(str);16 }

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

---

原理：

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

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

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

上一篇：隔行变色（表格隔行变色 + LI 浮动隔行变色）

下一篇：javascript的apply和call方法的使用详解