最近遇到了一個需求，是要去掉一張圖片的黑色背景，如下圖所示：
如果使用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 = https://www.cnblogs.com/flyfox1982/p/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、前端可視化方面有深入研究，對程式員思維能力訓練和培訓、程式員職業規劃有濃厚興趣，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/2108.html
標籤：其他