JavaScript image processing

Ideas

HTML5 's canvas provides the Getimagedata interface to obtain the data in the canvas, so we can first draw the picture on the DrawImage with the canvas interface and then get the image data matrix by Getimagedata.

For Canvas browser support, see:

Http://html5test.com/compare/feature/canvas-context.html

Note that while IE9 is starting to support the canvas interface, the data it getimagedata obtains is not stored in a standard typedarray manner, or that IE9 does not provide support for WEBGL Native data, To support IE9 if necessary, the following matrix needs to be saved in array mode. Although the following versions of IE9 (such as IE8) have open source projects Explorercanvas provide canvas support, unfortunately G_vmlcanvasmanager does not provide a bitmap data acquisition interface. The relevant content of Typedarray can refer to the new array of HTML5, Typedarray support can be seen in the following:

Http://html5test.com/compare/feature/webgl-datatypes-ArrayBuffer.html

Basic matrix

In the image processing, the matrix computation is very important content, therefore we first establishes a matrix model.

ImageData, which is obtained through the Getimagedata interface, has a similar matrix structure, but his structure is immutable and unsuitable for expansion, so we choose to build a matrix from JavaScript.

function Mat (__row, __col, __data, __buffer) {
    This.row = __row | | 0;
    This.col = __col | | 0;
    This.channel = 4;
    This.buffer = __buffer | | New Arraybuffer (__row * __col * 4);
    This.data = new Uint8clampedarray (this.buffer);
    __data && This.data.set (__data);
    This.bytes = 1;
    This.type = "Cv_rgba";
}

Row-Represents the number of rows in a matrix

Col-Represents the number of columns in a matrix

Channel-represents the number of channels because the image data obtained by Getimagedata is described in Rgba color space, which has four channels of red (red), green (green), Blue (blue) and alpha (opacity).

Buffer-the Arraybuffer reference used for the data.

Data-uint8clampedarray array of images.

Bytes-bytes are occupied per data unit because they are uint8 data types, so the number of bytes is 1.

Type-the data type is Cv_rgba.

The method of converting picture data into matrices

function Imread

(__image) {
    var width = __image.width,
        height = __image.height;
    Iresize (width, height);
    Ictx.drawimage (__image, 0, 0);
    var imagedata = ictx.getimagedata (0, 0, width, height),
        tempmat = new Mat (height, width, imagedata.data);
    ImageData = null;
    Ictx.clearrect (0, 0, width, height);
    return tempmat;
}