上一篇提到了一个国人腾讯团队开发的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 日 吴成果, 吴技术

这里就直入主题了,首先介绍几款能够协助你简单实现但也中切换效果的jQuery插件:
1.pagify.js
pagify.js的原理是利用JS来加载.html文件,实现单页的效果;
实现代码如下:

$(document).ready(function() {
	$('#page_holder').pagify({ //加载在id=page_holder的容器内
		pages: ['page1', 'page2', 'page3'], //加载的页面文件名以及对应的点击按钮id
		animation: 'fadeIn', //切换效果
		'default': 'about', //默认加载about.html
		cache: true  //使用缓存(预加载)
	});
});

优点:是可以分开建立单独的html文件,入门型插件,对前端技术能力要求不高;
劣势:对不同页面中css,js代码的调用会出现问题以及冲突(虽然使用中还未发现,但我认为肯定会有),以及对SEO非常不友好;
Demo请点击这里
GitHub请点击这里

2.impress.js
Demo请点击这里
磊友科技PPT效果 就是用这个JS插件做的;
阅读全文 …

2012 年 11 月 1 日 吴成果, 吴技术