最近遇到了一个需求，是要去掉一张图片的黑色背景，如下图所示：
如果使用OPENCV ，加上一些图像处理的算法，是可以实现去除任何背景的。但是由于这个需求就是去掉黑色背景，感觉没必要用到哪些比较复杂的算法。
于是打算在网络上搜索了一下，开始没有搜搜到，倒是搜索到一篇用ps如何来去掉黑色背景的思路： 去掉图片黑背景输出为透明png(算法和工具)
但是里面主要是说用PS的操作，而且里面说的原理，也不是很清晰。 所以打算自己想一个算法。
错误的思路
最开始的想法是判断颜色是否是黑色（r = 0，g = 0，b = 0），如果是黑色，就把该像素的透明度设置为0。 但是结果肯定是不如意的，如下图所示：
结果是，没有一个像素被设置为全透明的。 为什么呢？ 因为这个背景并不是纯黑色的，只是偏黑色，比如像素值（r=15，g=5，b=5），不是纯黑色，但是人眼的感觉是黑色的。
正确的思路
经过思索，想到了另外一种思路，就是越黑的颜色，其透明度设置的越低。 因此只需要去除像素中三个通道中的较大值，设置为颜色的透明度即可，比如像素值（r=15，g=5，b=5），则可以把透明度设置为 Math.max(15,5,5) = 15。
下面是示例代码：
代码语言：javascript复制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;
}把去掉黑色背景的图绘制到一个蓝色的背景上面，代码如下：
代码语言：javascript复制 ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'rgba(0,0,255,1.0)';
ctx.fillRect(0,image.height,image.width,image.height 10);最终如下图所示：
原理总结
由于我使用的是浏览器 JavaScript编程语言，所以我使用的是浏览器上面canvas的功能。 首先把图片绘制到canvas上面，然后可以通过canvas的相关方法取到每一个像素，然后使用去黑底的方法 操纵像素。
如果读者不清楚canvas相关知识点，建议学习相关知识，也推荐有兴趣读者，订阅专栏： Canvas高级进阶 https://xiaozhuanlan.com/canvas，相关知识会在专栏中介绍。
去黑底的原理，用通俗的话来说 “越黑的像素越透明”。
不同的方法，实现的细节上有可能会有些许区别。 比如，我们可以考虑把像素的最大值取出后，把线性空间变换到非线性空间,比如如下代码：
代码语言：javascript复制var adjust = 0.8;
data[index 3] = Math.pow(max/255,adjust) * 255;最终的效果，会有细节上的些许差别，可以调整adjust查看细节上的差异。
欢迎关注公众号“ITman彪叔”。彪叔，拥有10多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。
