Javascript image processing ideas and implementation code

Ideas
HTML5 canvas provides the getImageData interface to obtain the data in the canvas. Therefore, we can first draw the image on the canvas using the drawImage interface and then obtain the image data matrix through getImageData.

Although IE9 supports the canvas interface, the data obtained by getImageData is not stored in the standard TypedArray mode, or IE9 does not support WebGL Native binary data, therefore, to support IE9, the following matrices must be saved in Array mode. Although an open-source project named assumercanvas in IE9 or earlier versions (such as IE8) provides canvas support, G_vmlCanvasManager does not provide an interface for obtaining bitmap data. For more information about TypedArray, see the new HTML5 array.

Basic Matrix
In image processing, matrix computing is very important, so we should first establish a matrix model.
Although the ImageData obtained through the getImageData interface has a matrix-like structure, its structure is immutable and not suitable for expansion. Therefore, we choose to create a matrix in Javascript.Copy codeThe Code is as follows: 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-indicates the number of rows in the matrix.
Col-indicates the number of columns in the matrix.
Channel-indicates the number of channels, because the image data obtained through getImageData is described in the RGBA color space, that is, Red, Green, Blue) and Alpha (opacity.
Buffer-ArrayBuffer reference for data.
Data-The Uint8ClampedArray of the image.
Bytes-each data unit occupies 1 byte because it is a uint8 data type.
Type-the data type is CV_RGBA.
Converting image data into a matrixCopy codeThe Code is as follows: 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;
}

Note:: Here _ image refers to the Image object, not the string URL. Because Image reading in the browser is an asynchronous process and the corresponding Mat object cannot be returned immediately, this function should be used as follows:Copy codeThe Code is as follows: var img = new Image ();
Img. onload = function (){
Var myMat = cv. imread (img );
};
Img. src = "1.jpg ";

The iCtx and iResize methods are global variables that can be shared by other functions:Copy codeThe Code is as follows: var iCanvas = document. createElement ("canvas "),
ICtx = iCanvas. getContext ("2d ");
Function iResize (_ width, _ height ){
ICanvas. width = _ width;
ICanvas. height = _ height;
}

Let's take a look at the drawImage method.:
Purpose
Draw an image on the canvas.
Syntax
Context. drawImage (img, x, y );
Context. drawImage (img, x, y, width, height );
Context. drawImage (img, sx, sy, swidth, sheight, x, y, width, height );
Example
There is also the getImageData method:
Purpose
Obtain the image data in the canvas.
The data is returned in the RGBA color space, namely:
R-red channel size
G-green channel size
B-blue channel size
A-Opacity level
Syntax
Context. getImageData (x, y, width, height );
ExampleCopy codeThe Code is as follows: red = imgData. data [0];
Green = imgData. data [1];
Blue = imgData. data [2];
Alpha = imgData. data [3];

How to convert a matrix into image data
After processing the matrix, we need a method to convert it to ImageData. Then we can use the putImageData method to draw the processed image on the canvas.Copy codeThe Code is as follows: function RGBA2ImageData (_ imgMat ){
Var width = _ imgMat. col,
Height = _ imgMat. row,
ImageData = iCtx. createImageData (width, height );
ImageData. data. set (_ imgMat. data );
Return imageData;
}

Let's take a look at the putImageData method.:
Purpose
Use image data to draw images on the canvas.
Syntax
Context. putImageData (imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight );
Convert a color image to a grayscale image
Finally, we perform a simple color space transformation to convert the image from RGBA to GRAY.Copy codeThe Code is as follows: function cvtColor (_ src ){
If (_ src. type & _ src. type = "CV_RGBA "){
Var row = _ src. row,
Col = _ src. col;
Var dst = new Mat (row, col );
Data = dst. data,
Data2 = _ src. data;
Var pix1, pix2, pix = _ src. row * _ src. col * 4;
While (pix ){
Data [pix-= 4] = data [pix1 = pix + 1] = data [pix2 = pix + 2] = (data2 [pix] * 299 + data2 [pix1] * 587 + data2 [pix2] * 114) /1000;
Data [pix + 3] = data2 [pix + 3];
}
} Else {
Return src;
}
Return dst;
}

See the conversion formula in the OpenCV document.:
RGBA to Gray: Y <-0.299 * R + 0.587 * G + 0.114 * B
Gray to RGBA: R <-Y, G <-Y, B <-Y, A <-255
We can conclude that the rging between RGBA and GRAY (with four channels) should be:
RGBA to RGBA (GRAY): R1 = G1 = B1 <-0.299 * R + 0.587 * G + 0.114 * B, A1 <-