I recently encountered a requirement to remove the black background of an image, as shown below:

If you use OPENCV, with some image processing algorithms, it is possible to remove any background. However, since the requirement is to remove the black background, there is no need to use more complex algorithms.

So I planned to search on the Internet, but I didn’t find it at first, but I found an article on how to remove the black background with Photoshop: remove the black background of the image and output it as transparent PNG (algorithm and tools).

But it is mainly said to use PS operation, and said the principle of the inside, is not very clear. So I’m going to come up with my own algorithm.

Wrong train of thought

The initial idea was to determine if the color was black (r = 0, g = 0, b = 0), and if it was black, set the opacity of the pixel to 0. However, the results are certainly unsatisfactory, as shown in the following picture:

As a result, none of the pixels are set to be fully transparent. Why is that? For example, the pixel value (r=15, g=5, b=5) is not pure black, but the human eye feels black.

The right idea

After thinking about it, I came up with another idea, that is, the darker the color, the lower the transparency setting. So simply remove the larger values in the three channels of the pixel and set them to the opacity of the color. For example, the pixel values (r=15, g=5, b=5) can be set to Math.max(15,5,5) =15.

Here is the sample code:

function removeBlackBackgroundFunc(frameImageData) { let data = frameImageData.data; for(var i = 0; i < data.length / 4; i ++){ var index = i * 4; var r = data[index],g = data[index + 1],b = data[index + 2],a = data[index + 3]; var max = Math.max(r,g,b); data[index + 3] = max; if(r == 0 && g == 0 && b == 0){ data[index + 3] = 0; } } return frameImageData; }Copy the code

Draw the image with the black background removed onto a blue background with the following code:

ctx.globalCompositeOperation = 'destination-over'; CTX. FillStyle = 'rgba (0,0,255,1.0); ctx.fillRect(0,image.height,image.width,image.height + 10);Copy the code

The final picture is as follows:

The principle of summary

Since I use the browser’s JavaScript programming language, I use the canvas function on the browser. First, the picture is drawn on the canvas, and then each pixel can be obtained through the relevant method of the canvas, and then the pixel can be manipulated by removing the black background.

If readers are not clear about canvas knowledge, it is recommended to learn relevant knowledge, and interested readers are also recommended to subscribe to the column: Canvas Advanced Advanced xiaozhuanlan.com/canvas, and relevant knowledge will be introduced in the column.

The principle of removing black background is, in layman’s words, “the darker the pixel, the more transparent”.

Different methods, implementation details may be slightly different. For example, we can consider the transformation of linear space to nonlinear space after taking out the maximum number of pixels, such as the following code:

Var adjust = 0.8; data[index + 3] = Math.pow(max/255,adjust) * 255;Copy the code

In the end, there will be a slight difference in the details, so you can adjust to see the difference in the details.

Welcome to follow the public account “ITman Biao Uncle”. Uncle Biao, with more than 10 years of development experience, the current company system architect, technical director, technical trainer, career planner. In-depth research in computer graphics, WebGL, front-end visualization. Strong interest in programmer thinking ability training and training, programmer career planning.