A picture can say a thousand words and hide your program code_html5 tutorial skills

I recently developed my first web game: an HTML5 video puzzle. The development process was interesting. I like programming, but after implementing the game logic, I had an interesting idea: Why not find a way to hide the code? At first I thought of something very simple, such as disabling the context menu so that the source code of the page could be viewed when right-clicking. But this makes no sense, the right-click menu does not work, and people can still view the source code through keyboard shortcuts or "View Source" in the menu bar.

A picture can say a thousand words

It depends on the size of the picture. But I decided to encrypt the source code and store it in an image. The HTML5 canvas component is very suitable for this kind of thing because it supports operations on image pixels. A pixel is represented by four values ​​(channels): red, green, blue and alpha channel. Their values ​​are distributed from 0 to 255. My Javascript code is a character, and each character has an ASCII corresponding value. The range of ASCII values ​​is also 0-255, so what I want to do is to traverse each pixel on the canvas and set the ASCII value of 3 code characters for each pixel as its RGB value. You can easily do this through the charCodeAt function. Take out these characters.

What is generated is a colorful and small picture. It is my program code. Take a look:

When decoding, I only need to draw this picture on the canvas and traverse Pixel points, take out the characters represented by r, g, b values:


Concatenate them into one big string, and this is your code - executable code.

Does this protect your source code?

Actually no - an experienced (or even inexperienced) programmer can still figure out how to decode the image and extract the code inside, but I think this is to prevent those with bad business intentions The first step for someone to steal your code - and those programmers who can figure out how to decode it (mostly) are not there to steal

The main flaw of this method
This technology can only be applied in modern browsers that support HTML5 canvas technology. It will definitely not work in IE6 and IE8. Even some modern browsers have problems with encoding the alpha channel of images, so you can only put 3 characters per pixel - a 100×100 image can store 30,000 text characters.

Do you have any other simple ways to prevent others from copying your code? Of course we can encrypt characters, but how to ensure that your decryption steps cannot be easily cracked? Tell me what you think!