train of Thought
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.
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. So if you need support for IE9, the following matrices need 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. Typedarray's related content can refer to the new array of HTML5
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.
Copy Code code 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-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
Copy Code code 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;
}
Attention: The __image here refers to the image object, not the string URL. Because the image read in the browser is an asynchronous process and cannot immediately return the corresponding Mat object, this function should be used in this way:
Copy Code code as follows:
var img = new Image ();
Img.onload = function () {
var Mymat = Cv.imread (IMG);
};
IMG.SRC = "1.jpg";
The Ictx and Iresize methods are a global variable that is allowed to be common to other functions:
Copy Code code 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.：
Use
Draw a picture on the canvas.
Grammar
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 are also Getimagedata methods:
Use
Gets the image data in the canvas.
The data is returned in RGBA color space, namely:
R-Red channel size
G-Green channel size
B-Blue channel size
A-Opacity degree size
Grammar
Context.getimagedata (X,y,width,height);
Example
Copy Code code as follows:
red = imgdata.data[0];
Green = imgdata.data[1];
blue = imgdata.data[2];
Alpha = imgdata.data[3];
the method of matrix turning into image data
The processed matrix requires a method to become imagedata, and then we can draw the processed image on the canvas via the Putimagedata method.
Copy Code code 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.：
Use
Image data is used to draw images on canvas.
Grammar
Context.putimagedata (Imgdata,x,y,dirtyx,dirtyy,dirtywidth,dirtyheight);
Convert a color graph to a grayscale image
Finally we make a simple color space transformation, the image from the Rgba into gray.
Copy Code code 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;
}
refer to 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 Rgba to GRAY (refers to having 4 channels) the corresponding mapping relationship should be:
RGBA to RGBA (GRAY): R1 = G1 = B1 <-0.299 * R + 0.587 * G + 0.114 * B, A1 <-A
