Here’s how to moderately obfuscate your image:
It works by scrambling your map so the casual user cannot easily view it.
- Slice your image vertically and horizontally into many pieces.
- Scramble all those pieces and create a new scrambled image from them.
- Serve that scrambled image to the web page (this scrambled image is unrecognizable to the user).
- Save the scrambling order in a JSON array so you can later descramble the image.
Obfuscating Demo: http://jsfiddle.net/m1erickson/wWbt5/
When you need the image, unscramble it into an in-memory canvas that the user can’t see, but which you can programatically use in your game.
De-obfuscating Demo: http://jsfiddle.net/m1erickson/UtN6g/
Code for obfuscating
Before scrambling
After scrambling
![]()
Code for de-obfuscating
The obfuscated image
The de-obfuscated canvas
