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

2016-02-19 12:34 7 1 收藏

今天图老师小编要向大家分享个一张图片能隐含千言万语之隐藏你的程序代码教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

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

一张图片能隐含千言万语

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

代码如下:

.charCodeAt(0)

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

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

代码如下:

String.fromCharCode(code)

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

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

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

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

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

来源:http://www.tulaoshi.com/n/20160219/1601228.html

延伸阅读
标签: PhotoShop PS PS教程
PS两张图片合成一张的技巧 PS两张图片合成一张换背景效果 如上图,上面可是两张照片换背景合成的,怎么样,很漂亮吧。那么给图片换背景如何实现呢?目前最常用的就是使用Photoshop简单处理,其实也很简单,相信看完的朋友都可以轻松学会。 一、在电脑上安装好PS软件(没有的朋友请百度搜索一下下载)然后打开PS软件,点文件,...
标签: 电脑入门
      ∧,,,∧            /●   ●\          ╰/] - [\╯       世界那么脏,    何处谈悲伤. 男人男人男人 女人女人女人  &...
标签: Web开发
'把pattern 又修改了下 'code要检测的代码 'http://school.cnd8.com/asp.asp 'leixing html 或者ubb 'nopic 代码没有图片时默认值 function toppic(code,leixing,nopic)         set regex = new regexp         ...
来源:形色主义作者:苏色 本教程用到的溶图方法非常特别,基本上不需要蒙版及橡皮工具就可以实现。只需要用调整一下图层样式的混合选项就可轻松溶图。 原图 最终效果 1、打开原图素材和下面的天空素材,把天空素材拖进来适当放好位置,然后点击图层面板下面的混合选项,如下图。 2、选择混合选项,出现下图所示界面...
本教程虽然为临摹教程,不过难度还是非常大的。因为临摹的时候需要重新去构图及刻画细节。颜色方面需要结合美术用色稍作修改。这样出来的效果才会更漂亮。 原图 最终效果 1、先用渐变拉出天空底色。 2、新建图层刻画山体。PS的套索工具其实是画山的好帮手,可以轻松获得随机而肯定的山体边缘。 3、首先我只用PS的圆头...

经验教程

400

收藏

92
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部