“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

preface

First of all, the final effect of this article is not very successful. Keep a note of the problems I encountered and the techniques I tried during this failure.

I want to achieve the following effect similar to QQ musicThe background color is generated based on the theme color of the poster, and the final color is gaussian blur.

Just began to consider using JS to achieve, JS is certainly can achieve but tried several times the effect is not very good. And, for computing pixels, it’s better to do it on the back end.

This process is basically dividing the image into 1px by 1px pixels. Count the number of times each pixel of the same color appears. The most statistically significant color is theme color. I’m going to get an RGB color like RGB (255,255,255).

RGB color

As a junior programmer 👨🏻💻, I don’t know RGB color very well, so I checked it out.

  • RGB with table red green blue three primary colors.

  • Each color level ranges from 0 to 255, representing brightness. When all three are 0, it is the darkest black tone, and when all three are 255, it is the brightest white tone.

  • According to the calculation, the RGB colors of 256 levels can be combined with about 16.78 million colors, that is, 256×256×256=16777216. Often referred to simply as 16 million colors or 10 million colors. Also known as a 24-bit color (2 ^ 24).

The front end gets the picture tone

There is no way for to manipulate its pixels. Usually, it needs to generate

to read the image data.

Js reads local images to generate canvas

I first tried reading the images in the folder 📂 in an HTML file.

[1] Draw an image and a canvas in the label

                <img id="scream" src="shuijiao.jpg"/>
		<p>Canvas:</p>
		<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
Copy the code

[2] Obtain the print of the picture and canvas, and you can find that the print is dom element

GetContext (“2d”) is the syntax for setting up a 2d rendering context at ✈️

let img=document.getElementById("scream");
console.log(img)
let ctx=document.getElementById("myCanvas").getContext("2d");
Copy the code

[3] Loading is slow for reading images. So you need onLoad to wait for the load to finish. The previous step created the context, and drawImage is to draw the Canvas image source to the context.

img.onload=function(img,ctx){
	ctx.drawImage(img,0.0,img.width,img.height);
	console.log(ctx)
	var imgData_obj = ctx.getImageData(0.0.250.150)    // Get the image pixel matrix on the canvas
	// var imgData = imgData_obj.data;
	console.log(imgData_obj)
	return ctx
}
Copy the code

So let’s talk about the drawImage

It takes image sx, sy sWidth, sHeight, dx, dy, dWidth, dHeight

Syntax: The number of parameters can be 3, 5, 9. Note what the corresponding parameters represent

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Copy the code

And then the getImageData

Used to describe the pixel data implied by canvas

Syntax: The parameters are respectively x distance from the top, Y distance from the top, the height of the region to be extracted, and the height of the region to be extracted.

tx.getImageData(sx, sy, sw, sh);
Copy the code

Then there’s the problem: the canvas is generated but no pixel data is retrieved. Always report picture cross – domain problem. Then baidu a lot of this error can not be solved 🙅🏻♀️. I think it has something to do with reading images directly from folders. Just give it a try and write code in UNIApp.

The next article I tried to write in UNIApp