A picture can hide your program code in a thousand words

Comments: An HTML5 video intelligence game, the development process is very interesting, I like programming, but when the game logic is implemented, I have an interesting idea: I recently developed my first web game: An HTML5 video intelligence game. The development process is very interesting. I like programming, but when the game logic is implemented, I have an interesting idea: Why don't I try to hide the code? At first, I thought of some simple practices, such as disabling context menus, to prevent right-clicking and viewing the page source code. However, this is meaningless. Right-click menus cannot be used. People can still view source code through keyboard shortcuts or "view source files" in the menu bar.

A picture can contain thousands of words

This depends on the image size. However, I decided to store the source code encrypted into an image. The canvas component of HTML5 is suitable for such operations because it supports operations on image pixels. A pixel is represented by four values (channels): red, green, blue, and alpha channels. The value distribution ranges from 0 to 255. My Javascript code is a character, each character has an ASCII value. The ASCII value range is also 0-255, so what I want to do is traverse each pixel on the canvas, set the ASCII value of three code characters for each pixel as its RGB value. You can use the charCodeAt function to easily retrieve these characters.

The Code is as follows:
. CharCodeAt (0)

A colorful and small image is generated. Let's take a look at my program code:

During decoding, I only need to draw the image on the canvas, traverse the pixels, and retrieve the characters represented by the r, g, and B values:

The Code is as follows:
String. fromCharCode (code)

Concatenate them into a large string, which is your code-executable code.

Can this protect your source code?

In fact, it is impossible for an experienced (or even inexperienced) programmer to know how to decode the image and extract the code, but I think this is the first step to prevent people with bad business purposes from stealing your code-and programmers (mostly) who can figure out how to decode it are not plagiarized.

Main defects of this method
This technology can only be applied to modern browsers that support the HTML5 canvas technology. IE6 and IE8 cannot. Some modern browsers even have support for the alpha channel encoding of images. Therefore, each pixel can contain only three characters-a 100x100 image can contain 30 thousand text characters.

Do you have other simple methods to prevent others from copying your code? We can certainly encrypt characters, but how can we ensure that your decryption steps are not easily cracked? Tell me what you think!