25 九 2009, 1:28上午
javascript:
by

发表点儿看法吧

用Javascript对图片进行像素级的操作

网页中的图片在非等比操作的时候变形和失真非常严重。Firefox3.5以后的Gecko 1.9.1引擎中在Canvas标签中加入了一个imageData方法,可以把image的数据信息全部存储起来,让脚本来操作。如同flash中的的BitmapData一样的东东。

这儿有一个实例,展示了JS对图片的imageData操作。这里用了索贝尔算法(Sobel operator),通过查找图像边缘来进行等高横向拉伸

image  原图
image  Half image, 1 pass algorithm
image Full image, 1 pass algorithm
image Full image, full iterative algorithm
image pure css

对比一下,显然比纯css操作的效果要好得多。不过这种图像学里面的算法怎么玩对我这样的小白还是开飞机,以后HTML5,WebGL用得广泛了。框架多了就自然好操作了,在等待中纠结吧~~~~

 
  • 我在说

  • 我在看

  • 新文章

  • 文章归档