Javascript image processing ideas and implementation code_javascript skills

Idea
HTML5 canvas provides the getImageData interface to obtain the data in the canvas, so we can first use the drawImage interface to draw the image on the canvas and then obtain the image data matrix through getImageData.

It should be noted that although IE9 begins to support the canvas interface, the data obtained by its getImageData is not stored in the standard TypedArray method, or IE9 does not provide support for WebGL Native binary data, so if you need to Supported by IE9, the following matrix needs to be saved in Array mode. Although the open source project explorercanvas provides canvas support for versions below IE9 (such as IE8), unfortunately G_vmlCanvasManager does not provide a bitmap data acquisition interface. For related content of TypedArray, please refer to HTML5’s new array

Basic Matrix
In image processing, matrix calculation is very important, so we first build 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, so we choose to build a matrix ourselves in Javascript.

Copy code The 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 - represents the number of rows of the matrix
col - represents the number of columns of the matrix
channel - represents the number of channels, because the image data obtained through getImageData is based on The RGBA color space is described as having four channels: Red (red), Green (green), Blue (blue) and Alpha (opacity).
buffer - ArrayBuffer reference used by the data.
data - Uint8ClampedArray array data of the image.
bytes - Each data unit occupies bytes. Because it is a uint8 data type, the number of bytes occupied is 1.
type - The data type is CV_RGBA.
Method to convert image data into matrix

Copy code The 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: __image here refers to the Image object, not the string URL. Because reading Image in the browser is an asynchronous process and cannot return the corresponding Mat object immediately, this function should be used like this:

Copy code The code is as follows:

var img = new Image();
img.onload = function(){
var myMat = cv.imread(img);
};
img.src = "1.jpg";

iCtx and iResize methods are global variables, allowing them to be shared with other functions:

Copy code The 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 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 getImageData method:
Purpose
Get image data in canvas.
The data is returned in RGBA color space, that is:
R - red channel size
G - green channel size
B - blue channel size
A - opacity size
Syntax
context.getImageData(x,y,width,height);
Example

Copy code The code is as follows:

red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data [3];

Method for converting matrix into image data
The processed matrix needs a method to become ImageData, and then we can draw the processed image on the canvas through the putImageData method.

Copy code The 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
Draw an image on canvas through image data.
Syntax
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
Convert the color image into grayscale image
Finally we perform a simple color space transformation, Convert image from RGBA to GRAY.

Copy code The 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;
}

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 the corresponding mapping relationship of RGBA to GRAY (referring to having 4 channels) should be:
RGBA to RGBA(GRAY): R1 = G1 = B1 <- 0.299 * R 0.587 * G 0.114 * B , A1 <- A