init - 初始化项目
This commit is contained in:
Lee Nony
266
doc/js_tutorials/js_core/js_basic_ops/js_basic_ops.markdown
Normal file
266
doc/js_tutorials/js_core/js_basic_ops/js_basic_ops.markdown
Normal file
@@ -0,0 +1,266 @@
|
||||
Basic Operations on Images {#tutorial_js_basic_ops}
|
||||
==========================
|
||||
|
||||
Goal
|
||||
----
|
||||
|
||||
- Learn how to access image properties
|
||||
- Learn how to construct Mat
|
||||
- Learn how to copy Mat
|
||||
- Learn how to convert the type of Mat
|
||||
- Learn how to use MatVector
|
||||
- Learn how to access pixel values and modify them
|
||||
- Learn how to set Region of Interest (ROI)
|
||||
- Learn how to split and merge images
|
||||
|
||||
Accessing Image Properties
|
||||
--------------------------
|
||||
|
||||
Image properties include number of rows, columns and size, depth, channels, type of image data.
|
||||
|
||||
@code{.js}
|
||||
let src = cv.imread("canvasInput");
|
||||
console.log('image width: ' + src.cols + '\n' +
|
||||
'image height: ' + src.rows + '\n' +
|
||||
'image size: ' + src.size().width + '*' + src.size().height + '\n' +
|
||||
'image depth: ' + src.depth() + '\n' +
|
||||
'image channels ' + src.channels() + '\n' +
|
||||
'image type: ' + src.type() + '\n');
|
||||
@endcode
|
||||
|
||||
@note src.type() is very important while debugging because a large number of errors in OpenCV.js
|
||||
code are caused by invalid data type.
|
||||
|
||||
How to construct Mat
|
||||
--------------------
|
||||
|
||||
There are 4 basic constructors:
|
||||
|
||||
@code{.js}
|
||||
// 1. default constructor
|
||||
let mat = new cv.Mat();
|
||||
// 2. two-dimensional arrays by size and type
|
||||
let mat = new cv.Mat(size, type);
|
||||
// 3. two-dimensional arrays by rows, cols, and type
|
||||
let mat = new cv.Mat(rows, cols, type);
|
||||
// 4. two-dimensional arrays by rows, cols, and type with initialization value
|
||||
let mat = new cv.Mat(rows, cols, type, new cv.Scalar());
|
||||
@endcode
|
||||
|
||||
There are 3 static functions:
|
||||
|
||||
@code{.js}
|
||||
// 1. Create a Mat which is full of zeros
|
||||
let mat = cv.Mat.zeros(rows, cols, type);
|
||||
// 2. Create a Mat which is full of ones
|
||||
let mat = cv.Mat.ones(rows, cols, type);
|
||||
// 3. Create a Mat which is an identity matrix
|
||||
let mat = cv.Mat.eye(rows, cols, type);
|
||||
@endcode
|
||||
|
||||
There are 2 factory functions:
|
||||
@code{.js}
|
||||
// 1. Use JS array to construct a mat.
|
||||
// For example: let mat = cv.matFromArray(2, 2, cv.CV_8UC1, [1, 2, 3, 4]);
|
||||
let mat = cv.matFromArray(rows, cols, type, array);
|
||||
// 2. Use imgData to construct a mat
|
||||
let ctx = canvas.getContext("2d");
|
||||
let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
let mat = cv.matFromImageData(imgData);
|
||||
@endcode
|
||||
|
||||
@note Don't forget to delete cv.Mat when you don't want to use it any more.
|
||||
|
||||
How to copy Mat
|
||||
---------------
|
||||
|
||||
There are 2 ways to copy a Mat:
|
||||
|
||||
@code{.js}
|
||||
// 1. Clone
|
||||
let dst = src.clone();
|
||||
// 2. CopyTo(only entries indicated in the mask are copied)
|
||||
src.copyTo(dst, mask);
|
||||
@endcode
|
||||
|
||||
How to convert the type of Mat
|
||||
------------------------------
|
||||
|
||||
We use the function: **convertTo(m, rtype, alpha = 1, beta = 0)**
|
||||
@param m output matrix; if it does not have a proper size or type before the operation, it is reallocated.
|
||||
@param rtype desired output matrix type or, rather, the depth since the number of channels are the same as the input has; if rtype is negative, the output matrix will have the same type as the input.
|
||||
@param alpha optional scale factor.
|
||||
@param beta optional delta added to the scaled values.
|
||||
|
||||
@code{.js}
|
||||
src.convertTo(dst, rtype);
|
||||
@endcode
|
||||
|
||||
How use MatVector
|
||||
-----------------
|
||||
|
||||
@code{.js}
|
||||
let mat = new cv.Mat();
|
||||
// Initialise a MatVector
|
||||
let matVec = new cv.MatVector();
|
||||
// Push a Mat back into MatVector
|
||||
matVec.push_back(mat);
|
||||
// Get a Mat fom MatVector
|
||||
let cnt = matVec.get(0);
|
||||
mat.delete(); matVec.delete(); cnt.delete();
|
||||
@endcode
|
||||
|
||||
@note Don't forget to delete cv.Mat, cv.MatVector and cnt(the Mat you get from MatVector) when you don't want to use them any more.
|
||||
|
||||
Accessing and Modifying pixel values
|
||||
------------------------------------
|
||||
|
||||
Firstly, you should know the following type relationship:
|
||||
|
||||
Data Properties | C++ Type | JavaScript Typed Array | Mat Type
|
||||
--------------- | -------- | ---------------------- | --------
|
||||
data | uchar | Uint8Array | CV_8U
|
||||
data8S | char | Int8Array | CV_8S
|
||||
data16U | ushort | Uint16Array | CV_16U
|
||||
data16S | short | Int16Array | CV_16S
|
||||
data32S | int | Int32Array | CV_32S
|
||||
data32F | float | Float32Array | CV_32F
|
||||
data64F | double | Float64Array | CV_64F
|
||||
|
||||
**1. data**
|
||||
|
||||
@code{.js}
|
||||
let row = 3, col = 4;
|
||||
let src = cv.imread("canvasInput");
|
||||
if (src.isContinuous()) {
|
||||
let R = src.data[row * src.cols * src.channels() + col * src.channels()];
|
||||
let G = src.data[row * src.cols * src.channels() + col * src.channels() + 1];
|
||||
let B = src.data[row * src.cols * src.channels() + col * src.channels() + 2];
|
||||
let A = src.data[row * src.cols * src.channels() + col * src.channels() + 3];
|
||||
}
|
||||
@endcode
|
||||
|
||||
@note Data manipulation is only valid for continuous Mat. You should use isContinuous() to check first.
|
||||
|
||||
**2. at**
|
||||
|
||||
Mat Type | At Manipulation
|
||||
--------- | ---------------
|
||||
CV_8U | ucharAt
|
||||
CV_8S | charAt
|
||||
CV_16U | ushortAt
|
||||
CV_16S | shortAt
|
||||
CV_32S | intAt
|
||||
CV_32F | floatAt
|
||||
CV_64F | doubleAt
|
||||
|
||||
@code{.js}
|
||||
let row = 3, col = 4;
|
||||
let src = cv.imread("canvasInput");
|
||||
let R = src.ucharAt(row, col * src.channels());
|
||||
let G = src.ucharAt(row, col * src.channels() + 1);
|
||||
let B = src.ucharAt(row, col * src.channels() + 2);
|
||||
let A = src.ucharAt(row, col * src.channels() + 3);
|
||||
@endcode
|
||||
|
||||
@note At manipulation is only for single channel access and the value can't be modified.
|
||||
|
||||
**3. ptr**
|
||||
|
||||
Mat Type | Ptr Manipulation | JavaScript Typed Array
|
||||
-------- | --------------- | ----------------------
|
||||
CV_8U | ucharPtr | Uint8Array
|
||||
CV_8S | charPtr | Int8Array
|
||||
CV_16U | ushortPtr | Uint16Array
|
||||
CV_16S | shortPtr | Int16Array
|
||||
CV_32S | intPtr | Int32Array
|
||||
CV_32F | floatPtr | Float32Array
|
||||
CV_64F | doublePtr | Float64Array
|
||||
|
||||
@code{.js}
|
||||
let row = 3, col = 4;
|
||||
let src = cv.imread("canvasInput");
|
||||
let pixel = src.ucharPtr(row, col);
|
||||
let R = pixel[0];
|
||||
let G = pixel[1];
|
||||
let B = pixel[2];
|
||||
let A = pixel[3];
|
||||
@endcode
|
||||
|
||||
mat.ucharPtr(k) get the k th row of the mat. mat.ucharPtr(i, j) get the i th row and the j th column of the mat.
|
||||
|
||||
Image ROI
|
||||
---------
|
||||
|
||||
Sometimes, you will have to play with certain region of images. For eye detection in images, first
|
||||
face detection is done all over the image and when face is obtained, we select the face region alone
|
||||
and search for eyes inside it instead of searching whole image. It improves accuracy (because eyes
|
||||
are always on faces) and performance (because we search for a small area)
|
||||
|
||||
We use the function: **roi (rect)**
|
||||
@param rect rectangle Region of Interest.
|
||||
|
||||
Try it
|
||||
------
|
||||
|
||||
\htmlonly
|
||||
<iframe src="../../js_basic_ops_roi.html" width="100%"
|
||||
onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
|
||||
</iframe>
|
||||
\endhtmlonly
|
||||
|
||||
|
||||
Splitting and Merging Image Channels
|
||||
------------------------------------
|
||||
|
||||
Sometimes you will need to work separately on R,G,B channels of image. Then you need to split the
|
||||
RGB images to single planes. Or another time, you may need to join these individual channels to RGB
|
||||
image.
|
||||
|
||||
@code{.js}
|
||||
let src = cv.imread("canvasInput");
|
||||
let rgbaPlanes = new cv.MatVector();
|
||||
// Split the Mat
|
||||
cv.split(src, rgbaPlanes);
|
||||
// Get R channel
|
||||
let R = rgbaPlanes.get(0);
|
||||
// Merge all channels
|
||||
cv.merge(rgbaPlanes, src);
|
||||
src.delete(); rgbaPlanes.delete(); R.delete();
|
||||
@endcode
|
||||
|
||||
@note Don't forget to delete cv.Mat, cv.MatVector and R(the Mat you get from MatVector) when you don't want to use them any more.
|
||||
|
||||
Making Borders for Images (Padding)
|
||||
-----------------------------------
|
||||
|
||||
If you want to create a border around the image, something like a photo frame, you can use
|
||||
**cv.copyMakeBorder()** function. But it has more applications for convolution operation, zero
|
||||
padding etc. This function takes following arguments:
|
||||
|
||||
- **src** - input image
|
||||
- **top**, **bottom**, **left**, **right** - border width in number of pixels in corresponding
|
||||
directions
|
||||
|
||||
- **borderType** - Flag defining what kind of border to be added. It can be following types:
|
||||
- **cv.BORDER_CONSTANT** - Adds a constant colored border. The value should be given
|
||||
as next argument.
|
||||
- **cv.BORDER_REFLECT** - Border will be mirror reflection of the border elements,
|
||||
like this : *fedcba|abcdefgh|hgfedcb*
|
||||
- **cv.BORDER_REFLECT_101** or **cv.BORDER_DEFAULT** - Same as above, but with a
|
||||
slight change, like this : *gfedcb|abcdefgh|gfedcba*
|
||||
- **cv.BORDER_REPLICATE** - Last element is replicated throughout, like this:
|
||||
*aaaaaa|abcdefgh|hhhhhhh*
|
||||
- **cv.BORDER_WRAP** - Can't explain, it will look like this :
|
||||
*cdefgh|abcdefgh|abcdefg*
|
||||
|
||||
- **value** - Color of border if border type is cv.BORDER_CONSTANT
|
||||
|
||||
Try it
|
||||
------
|
||||
|
||||
\htmlonly
|
||||
<iframe src="../../js_basic_ops_copymakeborder.html" width="100%"
|
||||
onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
|
||||
</iframe>
|
||||
\endhtmlonly
|
||||
@@ -0,0 +1,62 @@
|
||||
Arithmetic Operations on Images {#tutorial_js_image_arithmetics}
|
||||
===============================
|
||||
|
||||
Goal
|
||||
----
|
||||
|
||||
- Learn several arithmetic operations on images like addition, subtraction, bitwise operations
|
||||
etc.
|
||||
- You will learn these functions : **cv.add()**, **cv.subtract()** etc.
|
||||
|
||||
Image Addition
|
||||
--------------
|
||||
|
||||
You can add two images by OpenCV function, cv.add(). res = img1 + img2. Both images should be of same depth and type.
|
||||
|
||||
For example, consider below sample:
|
||||
@code{.js}
|
||||
let src1 = cv.imread("canvasInput1");
|
||||
let src2 = cv.imread("canvasInput2");
|
||||
let dst = new cv.Mat();
|
||||
let mask = new cv.Mat();
|
||||
let dtype = -1;
|
||||
cv.add(src1, src2, dst, mask, dtype);
|
||||
src1.delete(); src2.delete(); dst.delete(); mask.delete();
|
||||
@endcode
|
||||
|
||||
Image Subtraction
|
||||
--------------
|
||||
|
||||
You can subtract two images by OpenCV function, cv.subtract(). res = img1 - img2. Both images should be of same depth and type. Note that when used with RGBA images, the alpha channel is also subtracted.
|
||||
|
||||
For example, consider below sample:
|
||||
@code{.js}
|
||||
let src1 = cv.imread("canvasInput1");
|
||||
let src2 = cv.imread("canvasInput2");
|
||||
let dst = new cv.Mat();
|
||||
let mask = new cv.Mat();
|
||||
let dtype = -1;
|
||||
cv.subtract(src1, src2, dst, mask, dtype);
|
||||
src1.delete(); src2.delete(); dst.delete(); mask.delete();
|
||||
@endcode
|
||||
|
||||
Bitwise Operations
|
||||
------------------
|
||||
|
||||
This includes bitwise AND, OR, NOT and XOR operations. They will be highly useful while extracting
|
||||
any part of the image, defining and working with non-rectangular
|
||||
ROI etc. Below we will see an example on how to change a particular region of an image.
|
||||
|
||||
I want to put OpenCV logo above an image. If I add two images, it will change color. If I blend it,
|
||||
I get an transparent effect. But I want it to be opaque. If it was a rectangular region, I could use
|
||||
ROI as we did in last chapter. But OpenCV logo is a not a rectangular shape. So you can do it with
|
||||
bitwise operations.
|
||||
|
||||
Try it
|
||||
------
|
||||
|
||||
\htmlonly
|
||||
<iframe src="../../js_image_arithmetics_bitwise.html" width="100%"
|
||||
onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
|
||||
</iframe>
|
||||
\endhtmlonly
|
||||
@@ -0,0 +1,120 @@
|
||||
Some Data Structures {#tutorial_js_some_data_structures}
|
||||
===============================
|
||||
|
||||
Goal
|
||||
----
|
||||
|
||||
- You will learn some data structures : **Point**, **Scalar**, **Size**, **Circle**, **Rect**, **RotatedRect** etc.
|
||||
|
||||
Scalar is array type in Javascript. Point, Size, Circle, Rect and RotatedRect are object type in JavaScript.
|
||||
|
||||
Point
|
||||
--------------
|
||||
|
||||
There are 2 ways to construct a Point and they are the same:
|
||||
@code{.js}
|
||||
// The first way
|
||||
let point = new cv.Point(x, y);
|
||||
// The second way
|
||||
let point = {x: x, y: y};
|
||||
@endcode
|
||||
|
||||
@param x x coordinate of the point.(the origin is the top left corner of the image)
|
||||
@param y y coordinate of the point.
|
||||
|
||||
Scalar
|
||||
--------------
|
||||
|
||||
There are 2 ways to construct a Scalar and they are the same:
|
||||
@code{.js}
|
||||
// The first way
|
||||
let scalar = new cv.Scalar(R, G, B, Alpha);
|
||||
// The second way
|
||||
let scalar = [R, G, B, Alpha];
|
||||
@endcode
|
||||
|
||||
@param R pixel value of red channel.
|
||||
@param G pixel value of green channel.
|
||||
@param B pixel value of blue channel.
|
||||
@param Alpha pixel value of alpha channel.
|
||||
|
||||
Size
|
||||
------------------
|
||||
|
||||
There are 2 ways to construct a Size and they are the same:
|
||||
@code{.js}
|
||||
// The first way
|
||||
let size = new cv.Size(width, height);
|
||||
// The second way
|
||||
let size = {width : width, height : height};
|
||||
@endcode
|
||||
|
||||
@param width the width of the size.
|
||||
@param height the height of the size.
|
||||
|
||||
Circle
|
||||
------------------
|
||||
|
||||
There are 2 ways to construct a Circle and they are the same:
|
||||
@code{.js}
|
||||
// The first way
|
||||
let circle = new cv.Circle(center, radius);
|
||||
// The second way
|
||||
let circle = {center : center, radius : radius};
|
||||
@endcode
|
||||
|
||||
@param center the center of the circle.
|
||||
@param radius the radius of the circle.
|
||||
|
||||
Rect
|
||||
------------------
|
||||
|
||||
There are 2 ways to construct a Rect and they are the same:
|
||||
@code{.js}
|
||||
// The first way
|
||||
let rect = new cv.Rect(x, y, width, height);
|
||||
// The second way
|
||||
let rect = {x : x, y : y, width : width, height : height};
|
||||
@endcode
|
||||
|
||||
@param x x coordinate of the vertex which is the top left corner of the rectangle.
|
||||
@param y y coordinate of the vertex which is the top left corner of the rectangle.
|
||||
@param width the width of the rectangle.
|
||||
@param height the height of the rectangle.
|
||||
|
||||
RotatedRect
|
||||
------------------
|
||||
|
||||
There are 2 ways to construct a RotatedRect and they are the same:
|
||||
@code{.js}
|
||||
// The first way
|
||||
let rotatedRect = new cv.RotatedRect(center, size, angle);
|
||||
// The second way
|
||||
let rotatedRect = {center : center, size : size, angle : angle};
|
||||
@endcode
|
||||
|
||||
@param center the rectangle mass center.
|
||||
@param size width and height of the rectangle.
|
||||
@param angle the rotation angle in a clockwise direction. When the angle is 0, 90, 180, 270 etc., the rectangle becomes an up-right rectangle.
|
||||
|
||||
Learn how to get the vertices from rotatedRect:
|
||||
|
||||
We use the function: **cv.RotatedRect.points(rotatedRect)**
|
||||
@param rotatedRect rotated rectangle
|
||||
|
||||
@code{.js}
|
||||
let vertices = cv.RotatedRect.points(rotatedRect);
|
||||
let point1 = vertices[0];
|
||||
let point2 = vertices[1];
|
||||
let point3 = vertices[2];
|
||||
let point4 = vertices[3];
|
||||
@endcode
|
||||
|
||||
Learn how to get the bounding rectangle from rotatedRect:
|
||||
|
||||
We use the function: **cv.RotatedRect.boundingRect(rotatedRect)**
|
||||
@param rotatedRect rotated rectangle
|
||||
|
||||
@code{.js}
|
||||
let boundingRect = cv.RotatedRect.boundingRect(rotatedRect);
|
||||
@endcode
|
||||
16
doc/js_tutorials/js_core/js_table_of_contents_core.markdown
Normal file
16
doc/js_tutorials/js_core/js_table_of_contents_core.markdown
Normal file
@@ -0,0 +1,16 @@
|
||||
Core Operations {#tutorial_js_table_of_contents_core}
|
||||
===============
|
||||
|
||||
- @subpage tutorial_js_basic_ops
|
||||
|
||||
Learn to read and
|
||||
edit pixel values, working with image ROI and other basic operations.
|
||||
|
||||
- @subpage tutorial_js_image_arithmetics
|
||||
|
||||
Perform arithmetic
|
||||
operations on images
|
||||
|
||||
- @subpage tutorial_js_some_data_structures
|
||||
|
||||
Learn some data structures
|
||||
Reference in New Issue
Block a user