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

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

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

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

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