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

推荐：HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
HTML 5 可以说是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化

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

一张图片能隐含千言万语

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


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

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


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

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

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

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

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

分享：使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
把图片作为background-image，添加的样式浏览器可以很好的渲染,我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式(圆角 阴影 渐变)等效果