convolution
What is convolution?
I will skip some of the explanations with professional terms that belong to the description of professional terms. I try to explain literally what convolution is… Volume, understood as a kind of compression; Product, product, accumulation; Convolution requires a convolution kernel, usually a square matrix of 3 by 3 or 5 by 5, like this
// a 3x3 convolution kernel 0 0 0 0 1 0 0 0 0 0 0Copy the code
How do we process data with convolution kernels? Here’s an example:
// This is our data source 1 3 5 1 3 5 4 5 6 1 3 5 1 3 5 5 4 5 6 1 3 5 1 3 5 1 3 5 4 5 5 5 6 1 3 5 1 3 5 1 3 5 4 5 5 6 1 3 5 1 3 5 5 5 5 6 1 3 5 1 3 5 5 5 5 6 1 3 5Copy the code
We are going to “scan and process” each piece of data with the convolution kernel, for example, 5 in the second row and second column
1 0 0 4 5 6 * 0 1 0 4 5 6 0 0 0Copy the code
We pull out the numbers around 5, and then multiply and add the numbers in the same position to get 5, which is of course, because all the convolution kernel does is output the original data 😂
-1-1, 1-1, 8-1, 1-1, 1-1Copy the code
Same principle, let’s try a different convolution kernel
1 3 5-1-1 4 5 6 * -1 8-1 4 5 6-1-1Copy the code
So what we get is theta
1 * 1 + 3 * 1 + 5 * 1 + 4 * 1 + 5 * 8 + 6 * 1 + 4 * 1 + 5 * 1 * 1 + 6 = 6Copy the code
And then you put the 6 in place of the 5, and you “scan and process” each data
What about the edges?
- Constant filling
- Copy edge pixels
Sudden deep expansion
Convolution is very important in deep learning. The following is a visualization of the convolution process of CNN. Scs.ryerson.
canvas
<canvas> is an HTML element that can be drawn using a script (usually JavaScript). It can be used for charting, composing pictures, or making simple (and not-so-simple) animations.
Drawing pictures on canvas
ctx.drawImage(image, x, y)Copy the code
Canvas is converted to ImageData
ctx.getImageData(sx, sy, sw, sh); / / returns the ImageDataCopy the code
The ImageData data is a Uint8ClampedArray which describes a one-dimensional array containing data in RGBA order, represented as integers from 0 to 255 (inclusive). So each point will be represented as:
R G B A 255 255 0 255Copy the code
Convolution + ImageData =?
An image boils down to a bunch of color point matrices, we can completely replace the number matrix above with color points,
Different convolution check images are processed as follows (image from Wikipedia)
Convolution is such a magic 😂
Implement convolution in canvas
Here is an example of JavaScript convolving ImageData output by Canvas:
[-1, -1, -1, -1, 8, -1, -1, -1, -1] * offset increases RGBA value directly, This is going to increase the brightness * the for loop below * y is the row, x is the column, C represents RGBA */ convolutionMatrix(input, kernel, offset = 0) { let ctx = this.outputCtx let output = ctx.createImageData(input) let w = input.width, h = input.height let iD = input.data, oD = output.data for (let y = 1; y < h - 1; y += 1) { for (let x = 1; x < w - 1; x += 1) { for (let c = 0; c < 3; c += 1) { let i = (y * w + x) * 4 + c oD[i] = offset + (kernel[0] * iD[i - w * 4 - 4] + kernel[1] * iD[i - w * 4] + kernel[2] * iD[i - w * 4 + 4] + kernel[3] * iD[i - 4] + kernel[4] * iD[i] + kernel[5] * iD[i + 4] + kernel[6] * iD[i + w * 4 - 4] + kernel[7] * iD[i + w * 4] + kernel[8] * iD[i + w * 4 + 4]) / this.divisor } oD[(y * w + x) * 4 + 3] = 255 } } ctx.putImageData(output, 0, 0) }Copy the code
The finished product code
Github.com/ssshooter/….
Test url, attached egg hee Hee hee 😘
ssshooter.github.io/c…