Home > Developer > JavaScript
Code = Picture
Picture = code
JS code for like F12 comrades, even a fig leaf are not ...
Even though the code becomes a picture, it just adds a layer of gauze ... But this method is quite fun, and the code is compressed a bit.
The idea of seeing [picture = code] for the first time is seen in a blog that demonstrates a jigsaw puzzle.
Recently a little busy, think of this, and tried.
For characters such as Chinese, you need to convert to 16, then the RGB pixels of the picture
document.write (Escape ("word")); // %u5b57document.write (unescape ("%u5b57"));---
Online Address:
Http://wangxinsheng.herokuapp.com/imageData
Complete uncompressed, without confusing free code:
http://download.csdn.net/detail/wangxsh42/8551511
The following is a code picture of jquery 1.9.1:
---
Code snippet:
Html:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <Metaname= "description"content= "HTML5 js2png">6 <Metaname= "keywords"content= "Html5,canvas,png,js">7 <Metaname= "Author"content= "Wangxinsheng">8 <title>CopyRight©Wangxinsheng</title>9 <Scriptsrc= "Jquery-1.9.1.min.js"></Script>Ten <styletype= "Text/css"> One </style> A </Head> - <Body> - <P> theJavascript:<BR/> - <textareaID= ' js 'rows= "5"cols= " the"> - function A (ARG) {alert (ARG)}; -A ("Hello world!");</textarea> + <BR/> - <ButtonID= ' Topng 'type= "button">2png</Button> + <ButtonID= ' Tojs 'type= "button">2js</Button> A <ButtonID= ' canvastoimg 'type= "button">C2img</Button> at <ButtonID= ' Runjs 'type= "button">Run Js</Button> - <ButtonID= ' Clear 'type= "button">Clear</Button> - </P> - <P> -Picture<BR/> - <inputID= ' Pngfile 'type= "File"onchange= "Onpngfilechange (this)" /><BR/> in <CanvasID= "png"width= ' Ten 'Height= ' Ten '></Canvas> - <imgID= "Pngimg" /> to </P> + </Body> - <Scriptsrc= "Imagedata.js"></Script> the </HTML>View Code
Js:
1 //encode the JS code as a picture2 functionTopng (jsorg) {3 varCanvas = document.getElementById ("PNG");4 varContext = Canvas.getcontext ("2d");5 varwidth = Math.ceil (math.sqrt (JSORG.LENGTH/3));6 varHeight =width;7$ ("#png"). attr ("width", width). attr ("height", height);8$ ("#png"). Width (width). height (height);9 varImageData =context.createimagedata (width, height);Ten One varA =Stringtohex (jsorg); A vararr = A.split (","); - for(vari = 0,j=0;j<width*height*4;i++,j++){ - if((j+1)%4==0){ theimagedata.data[j]=255; -J + +; - } - if(i<arr.length) +IMAGEDATA.DATA[J] =Arr[i]; - } + //Console.log (imagedata.data); AContext.putimagedata (imageData, 0, 0); at}
1 //parse the image for JS code2 functionTojs (canvasid) {3 varCanvas =document.getElementById (CANVASID);4 varContext = Canvas.getcontext ("2d");5 varwidth = $ ("#" +canvasid). width ();6 varHeight = $ ("#" +canvasid). Height ();7 varImageData = context.getimagedata (0, 0, width, height);8 //Console.log (imagedata.data);9 varstr = "";Ten for(vari = 0;i<imagedata.data.length;i++){ One if((i+1)%4==0) A Continue; -str + = imagedata.data[i]!=0?hextostring (Imagedata.data[i]): "; - } the$ ("#js"). val (str); -}
You can also add the private key encryption function [Add offset]
---
Principle:
The character can be converted to 16, which corresponds to a r/g/b of the picture RGB, that is, a pixel can hold 3 characters.
Note: The canvas of RGBA, transparency A does not seem to be used, after use, RGB will vary, resulting in the incorrect decoding.
Specific principles can be consulted: http://www.qingdou.me/2170.html
Achieve Another way to compress and encrypt JavaScript code--code image conversion
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
