上一篇提到了一个国人腾讯团队开发的HTML5图片处理引擎

效果那是牛的一B啊,但问题是只有几个有限的处理效果;
于是想自己也写个简单的,虽然小琪我N9不写算法了,当年参加ACM比赛的那股劲道早就忘的一干二净了;

好汉就不提当年勇了,今天写一个简单的算法来处理图片;
PS:没优化,没效率,大家就别鄙视我了,否则我要自卑的~

首先在HTML页面中插入一张图片,定义id为artwork;

1.第一步,就是加载一个图片到Canvas对象中去,这很简单;

2.第二步,读取图像的每一个像素,用rgb标准的方式,存入数组data中;
这里简单的说明下,默认的读取方式的连续的数组;
坐标为[0,0]像素的颜色属性,将被存储在data[0], data[1], data[2], data[3]中;
坐标为[1,0]像素的颜色属性,将被存储在data[4], data[5], data[6], data[7]中;

大家会奇怪,既然使用rgb标准的颜色,数组长度应该是3,怎么会是4呢?
这里,网页中记录图片的rgb值为[r, g, b, alpha],这最后一个值表示的是透明度;
准确的说,网页使用的是rgba格式标准,(red, green, blue, alpha);
正红色,rgba值是[255, 0, 0, 255];
这里,透明度0表示完全透明,而255表示完全不透明;
阅读全文 …

2013 年 4 月 22 日 吴成果, 吴技术

昨天在QQ群里看到这么一个链接,点进去一看,惊讶!
链接先贴上:http://alloyteam.github.com/AlloyPhoto/alloyphoto.html

简单说明下,AlloyImage是腾讯前端推出一项基于HTML5的开源图片处理引擎;
牛瓣不牛瓣大家自己看了说,原来手机App中那些个处理图片的效果都素浮云啦~

然后自己下载了Alloy的JS代码,简单实现了几个代码中基础滤镜的效果!
Demo请猛点这里(Demo图片为和老婆的结婚照),用的都是AlloyImage自带的滤镜方法;

然后看了下AlloyImage.js的源代码,Alloy小组对代码全部公开,这也让小琪学到了很多东西;

阅读全文 …

2013 年 3 月 30 日 吴成果, 吴技术

最近在研究HTML5的时候,发现了很多国外的网站,都运用了一种单页的展示技术,这些网站多数都设计的特别漂亮;
所以,今天独立开辟一个话题“单页网站”,来对这个新的网站表现形式说一下自己的看法;

今天第一篇,从色开始,一些非常漂亮的单页,可惜的是大多数都是老外的网站,国内的不多:
PS:请准备好Chrome/Firefox/Opera/Safari,如果你是用IE浏览,请自觉过滤掉这篇文章;

愤怒的小鸟

atomicduo.com

阅读全文 …

2012 年 10 月 26 日 吴成果, 吴技术

最近研究HTML5的时候,想在手机上通过HTML5,获得GPS定位数据,可是发觉不行;

页面在这里,用的是baidu的地图,可能要被很多同行鄙视了,实在是因为大会期间,Google各种服务都被连接重置啊;
地址在这里,可以用手机访问: http://www.54575.com/mobile/geolocation/index.html

本人Android2.3系统手机,用自带的浏览器打开后,手机并没有开启GPS模块,定位结果如图:

阅读全文 …

2012 年 10 月 25 日 吴技术

这次做的是用HTML5,绘制一个Android机器人;
Demo在这里:http://www.54575.com/mobile/canvas/android.html
代码请直接右键->查看网页源代码

截图:

主要学习了填充颜色fill(),弧线bezierCurveTo(),画圆arc(),画线lineTo()等函数使用;

特别要指出的是,如此NB的html5,竟然没有一个支持画椭圆的函数,让我很郁闷,只能用弧线bezierCurveTo()模拟出椭圆,变得非常复杂;

下面说下自己使用过程中遇到的两个难点,圆角和椭圆的绘制,以及解决方法:
阅读全文 …

2012 年 7 月 19 日 吴成果, 吴技术

最近用手机浏览了下自己的Blog,突然觉得那个才叫一个2B啊;
作为一名有市场意式,有设计理念的码农,于是决定用2个星期时间,来小学习下移动终端Web开发;

首先,我先找出了下目前主流的显示终端的分辨率如下:

设备 分辨率
iPad 1024×768
iPhone 4 640×960
iPhone 3GS 320×480
HTC G7 480×800

最小的分辨率宽度是320;

本人的手机是HTC G7,用默认浏览器打开3G版新浪首页,是这样的:

阅读全文 …

2012 年 7 月 12 日 吴技术