去掉图片黑背景输出为透明背景

最近遇到了一个需求，是要去掉一张图片的黑色背景，如下图所示：

如果使用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。

下面是示例代码：

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;
}

把去掉黑色背景的图绘制到一个蓝色的背景上面，代码如下：

  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，相关知识会在专栏中介绍。

去黑底的原理，用通俗的话来说 “越黑的像素越透明”。

不同的方法，实现的细节上有可能会有些许区别。
比如，我们可以考虑把像素的最大值取出后，把线性空间变换到非线性空间,比如如下代码：

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

最终的效果，会有细节上的些许差别，可以调整adjust查看细节上的差异。

欢迎关注公众号“ITman彪叔”。彪叔，拥有10多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。