一张图片能隐含千言万语之隐藏你的程序代码

一张图片能隐含千言万语之隐藏你的程序代码_html5教程技巧

php中文网

发布： 2016-05-16 15:50:48

原创

2105人浏览过

我最近开发了我的第一个网页游戏：一个HTML5的视频智力游戏。开发的过程很有趣，我喜欢编程，但当实现了游戏逻辑后，我有了一个有趣的想法：为什么不想个办法把代码隐藏起来？起初我想到的是一些很简单的做法，比如禁止上下文菜单，以防右键点击时可以查看页面源代码。但这毫无意义，右键菜单不能用，人们仍然可以通过键盘快捷键或菜单栏里的“查看源文件”来观看源代码。

一张图片能隐含千言万语

这依赖于图片的体积。但我决定要把源代码加密存放到一张图片里。HTML5的画布(canvas)组件很适合干这种事情，因为它支持针对图像像素的操作。一个像素由四个值(通道)来表示：红，绿，蓝和alpha通道。它们的值的分布范围是从0到255。我的Javascript代码就是一个个的字符，每个字符都有一个ASCII对应值。ASCII值的范围也是0-255，所以，我想做的是，遍历画布上的每个像素，给每个像素设置3个代码字符的ASCII值作为它的RGB值，你可以通过charCodeAt函数轻松的取出这些字符。

百宝箱

百宝箱是支付宝推出的一站式AI原生应用开发平台，无需任何代码基础，只需三步即可完成AI应用的创建与发布。

911

查看详情

复制代码

代码如下:

.charCodeAt(0)

生成的是一张色彩斑斓、很小的图片，它就是我的程序代码看看吧:

解码的时候，我只需要把这个图片画到画布上，遍历像素点，取出r,g,b值所代表的字符：

复制代码

代码如下:

String.fromCharCode(code)

把它们连接成一个大的字符串，这就是你的代码了——可执行的代码。

这样就能保护你的源代码了吗？

其实不能——一个有经验的(甚至没有经验的)程序员仍然能够知道如何去解码图片，取出里面的代码，但我想这是能防止那些怀着不良商业目的人偷盗你的的代码的第一步措施——而那些能够想出如何解码的程序员(大部分)都不是来剽窃的

这种方法的主要缺陷
这种技术只能应用在支持HTML5画布(canvas)技术的现代浏览器里，IE6、IE8 里肯定是不行的。甚至有些现代的浏览器对于图片的alpha通道的编码也有支持问题，所以，每个像素点你只能放3个字符——一个100×100大小的图片可以存放3万个文本字符。

你还有其它简单的能防止别人拷贝你的代码的方法吗？我们当然可以把字符进行加密，但如何保证你的解密步骤能不被人轻易的破解呢？告诉我你的想法吧！

大家都在看：

html下一页功能手把手教你使用给站点开启https和http2（附代码） html5精选特效代码分享（收藏） H5页面如何实现跨平台适配方案一套代码适配多端的关键方法解析 H5页面制作中如何减少首屏加载时间首屏秒开的6个优化秘籍