最近遇到了一個需求，是要去掉一張圖片的黑色背景，如下圖所示：
如果使用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多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。熟悉Java、JavaScript、Python語言，熟悉數據庫。熟悉java、nodejs應用系統架構，大數據高并發、高可用、分布式架構。在計算機圖形學、WebGL、前端可視化方面有深入研究。對程序員思維能力訓練和培訓、程序員職業規劃有濃厚興趣。
