Use canvas to load images. HTML5 canvas has a getImageData() method to get the color of a pixel at a certain point, and then lighten the color (you can add transparency to the effect), but the point where you get the pixel may not be the color you want. I think it’s best to submit it to the server for processing
According to what you said, you need to get the main color of the entire picture, and then set the background to be consistent with the main color, but a slightly lighter color. You can use transparency, or you can also reduce the color depth. If your background is a picture, then you have to change the picture according to the color.
There are quite a few libraries for getting the main color, such as DBImageColorPicker, etc.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Use canvas to load images. HTML5 canvas has a
getImageData()method to get the color of a pixel at a certain point, and then lighten the color (you can add transparency to the effect), but the point where you get the pixel may not be the color you want.I think it’s best to submit it to the server for processing
Isn’t this a white translucent mask?
According to what you said, you need to get the main color of the entire picture, and then set the background to be consistent with the main color, but a slightly lighter color. You can use transparency, or you can also reduce the color depth. If your background is a picture, then you have to change the picture according to the color.
There are quite a few libraries for getting the main color, such as DBImageColorPicker, etc.
It should be a translucent mask on top, and what’s underneath the mask is the enlarged avatar