[實現]Javascript代碼的另一種壓縮與加密方法—

[實現]Javascript代碼的另一種壓縮與加密方法——代碼圖片轉換

最後更新：2015-03-31 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

代碼=圖片

圖片=代碼

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

[實現]Javascript代碼的另一種壓縮與加密方法——代碼圖片轉換

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More