首先声明,我是一个菜鸟。一下文章中出现技术误导况情盖不负责
思绪
HTML5的canvas供提了getImageData接口来取获canvas中的数据,所以我们够能先用drawImage接口将图片画在canvas上然后再通过getImageData到得图片数据矩阵。
canvas的浏览器支撑况情,请见参:
http://html5test.com/compare/feature/canvas-context.html
须要注意,虽然IE9开始支撑了canvas接口,但是其getImageData取获的数据不并是以准标的TypedArray式方存储的,或者说IE9没有供提对WebGL Native binary data的支撑,所以如果须要对IE9支撑,上面的矩阵须要用Array的式方保存。虽然IE9以下本版(例如IE8)有开源项目explorercanvas供提canvas支撑,但很可惜G_vmlCanvasManager并没有供提图位数据取获接口。TypedArray的相干容内可以参考HTML5的新数组,TypedArray的相干支撑况情可以见参:
http://html5test.com/compare/feature/webgl-datatypes-ArrayBuffer.html
基本矩阵
在图像处置中,矩阵计算是非常重要的容内,所以我们首先来立建一个矩阵模型。
通过getImageData接口取获的ImageData虽然有拥相似矩阵的构结,但是他的构结是不可变的,不适合扩展,所以我们选择在Javascript中自建一个矩阵。
function Mat(__row, __col, __data, __buffer){