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


Posted in HTML / CSS onDecember 13, 2012

我最近开发了我的第一个网页游戏:一个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万个文本字符。

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

HTML / CSS 相关文章推荐
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 #HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 #HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 #HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 #HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 #HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 #HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 #HTML / CSS
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
其他功能
2006/10/09 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
PHP中比较时间大小实例
2014/08/21 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
splice slice区别
2006/10/09 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
javascript globalStorage类代码
2009/06/04 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
python实现图片彩色转化为素描
2019/01/15 Python
python创建n行m列数组示例
2019/12/02 Python
基于python3生成标签云代码解析
2020/02/18 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
印度在线购物网站:Paytmmall
2019/07/24 全球购物
生日答谢词
2015/01/05 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
指导老师鉴定意见
2015/06/05 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Python实现位图分割的效果
2021/11/20 Python