Shulou(Shulou.com)06/01 Report--

This article is about how to use canvas to process basic images in html5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Basic API

Canvas's image processing capabilities process pixel data through ImageData objects. The main API is as follows:

CreateImageData (): create a blank ImageData object

GetImageData (): get canvas pixel data, each pixel has 4 values-- rgba

PutImageData (): writes pixel data to the canvas

ImageData = {width: Number, height: Number, data: Uint8ClampedArray}

Width is the width of the canvas canvas or the number of pixels on the x-axis; height is the height of the canvas or the number of pixels on the y-axis; and data is the pixel data array of the canvas, with a total length of w * h * 4, with every four values (rgba) representing one pixel.

The handling of pictures

Next, let's take a look at the basic image processing capabilities of canvas through a few examples.

Const cvs = document.getElementById ("canvas"); const ctx = cvs.getContext ("2d"); const img = new Image (); img.src= "picture URL"; img.onload = function () {ctx.drawImage (img, 0,0, w, h);}

Negative / negative effect

Algorithm: take the difference between the rgb of 255and the pixel as the current value.

Function negative (x) {let y = 255-x; return y;} const imageData = ctx.getImageData (0,0, w, h); const {data} = imageData;let l = data.length;for (let I = 0; I

< l; i+=4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; data[i] = negative(r); data[i + 1] = negative(g); data[i + 2] = negative(b);}ctx.putImageData(imageData, 0, 0); 单色效果 单色效果就是保留当前像素的 rgb 3个值中的一个，去除其他色值。 for(let i = 0; i < l; i+=4) { // 去除了 r 、g 的值 data[i] = 0; data[i + 1] = 0;} 灰度图 灰度图：每个像素只有一个色值的图像。0 到 255 的色值，颜色由黑变白。 for(let i = 0; i < l; i+=4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; const gray = grayFn(r, g, b); data[i] = gray; data[i + 1] = gray; data[i + 2] = gray;} 算法1--平均法： const gray = (r + g + b) / 3; 算法2--人眼感知：根据人眼对红绿蓝三色的感知程度：绿 >

Red > blue, given weight division

Const gray = r * 0.3 + g * 0.59 + b * 0.11

In addition, there are:

Take the maximum or minimum value.

Const grayMax = Math.max (r, g, b); / / larger, brighter const grayMin = Math.min (r, g, b); / / smaller, darker const grayMax = Math.max (r, g, b); / / larger, brighter const grayMin = Math.min (r, g, b); / / smaller, darker

Take a single channel, that is, one of the three rgb values.

Binary graph

Algorithm: determine a color value, compare the current rgb value, greater than this value to show black, otherwise show white.

For (let I = 0; I

< l; i+=4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; const gray = gray1(r, g, b); const binary = gray >

126255: 0; data [I] = binary; data [I + 1] = binary; data [I + 2] = binary;}

Gaussian blur

Gaussian blur is one of the "blur" algorithms, in which the value of each pixel is a weighted average of the values of neighboring pixels. The value of the original pixel has the largest Gaussian distribution (with the largest weight), and the weight of the adjacent pixel becomes smaller and smaller as it gets farther and farther away from the original pixel.

First order formula:

(the first-order formula is used because the algorithm of the first-order formula is relatively simple)

Const radius = 5; / Fuzzy Radius const weightMatrix = generateWeightMatrix (radius); / / weight Matrix for (let y = 0; y < h; YBG +) {for (let x = 0; x < w; x let +) {let [r, g, b] = [0,0,0]; let sum = 0; let k = (y * w + x) * 4; for (let I =-radius) I = 0 & & x1 < w) {let j = (y * w + x1) * 4; r + = data [j] * weightMatrix [I + radius]; g + = data [j + 1] * weightMatrix [I + radius]; b + = data [j + 2] * weightMatrix [I + radius]; sum + = weightMatrix [I + radius];} data [k] = r / sum; data [k + 1] = g / sum Data [k + 2] = b / sum;}} for (let x = 0; x < w; x x +) {for (let y = 0; y < h; y let +) {let [r, g, b] = [0,0,0]; let sum = 0; let k = (y * w + x) * 4; for (let I =-radius; I = 0 & y 1 < h) {let j = (y1 * w + x) * 4 R + = data [j] * weightMatrix [I + radius]; g + = data [j + 1] * weightMatrix [I + radius]; b + = data [j + 2] * weightMatrix [I + radius]; sum + = weightMatrix [I + radius];} data [k] = r / sum; data [k + 1] = g / sum; data [k + 2] = b / sum }} function generateWeightMatrix (radius = 1, sigma) {/ / sigma normal distribution standard deviation const a = 1 / (Math.sqrt (2 * Math.PI) * sigma); const b =-1 / (2 * Math.pow (sigma, 2)); let weight, weightSum = 0, weightMatrix = []; for (let I =-radius; i item / weightSum); / / normalization} Thank you for reading! On "how to use canvas in html5 to deal with basic images" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.