從 Canvas 圖像中刪除背景

Question

當我將任何圖像上傳到 canvas 標簽時，我希望我可以刪除徽標周圍的背景。 這是我的代碼：

使用 jQuery 1.12.4 和 jQuery UI 1.9.2

<canvas id="canvas" class="resize" style="width:200px;height:200px;"></canvas>
<input type="file" id="file-input">

<button id="removeBKG" onclick="removeBKG();">
RIMUOVI SFONDO
</button>

<script>
$(function() {
            
            $('#file-input').change(function(e) {
                var file = e.target.files[0],
                    imageType = /image.*/;

                if (!file.type.match(imageType))
                    return;

                var reader = new FileReader();
                reader.onload = fileOnload;
                reader.readAsDataURL(file);
            });

            function fileOnload(e) {
                var $img = $('<img>', { src: e.target.result });
                $img.load(function() {
                    var canvas = $('#canvas')[0];
                    var context = canvas.getContext('2d');

                    canvas.width = this.naturalWidth;
                    canvas.height = this.naturalHeight;
                    context.drawImage(this, 0, 0);
                });
            }
            
            $(document).mouseup(function(e) 
            {
                var container = $(".ui-wrapper");

                // if the target of the click isn't the container nor a descendant of the container
                if (!container.is(e.target) && container.has(e.target).length === 0) 
                {
                    $("#canvas").css("border-style","hidden");
                    $(".ui-resizable-handle").attr("style","visibility: hidden");
                } else {
                        $("#canvas").css("border-style","solid");
                        $(".ui-resizable-handle").attr("style","visibility: visible");
                }
            });
            
            
                window.zindex = 30;

                $(".resize").resizable({handles: 'ne, se, sw, nw'});
                $(".resize").parent().draggable({
                    stack: "div"
                });
            
        });
    
    
    function removeBKG(){
    var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("canvas");

canvas.height = canvas.width = 135;
ctx.drawImage(image,0,0);
    
var imgd = ctx.getImageData(0, 0, 135, 135),
    pix = imgd.data,
    newColor = {r:0,g:0,b:0, a:0};

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
            g = pix[i+1],
            b = pix[i+2];

            pix[i] = newColor.r;
            pix[i+1] = newColor.g;
            pix[i+2] = newColor.b;
            pix[i+3] = newColor.a;
}

ctx.putImageData(imgd, 0, 0);
}
</script>

單擊 function 時的預期結果：圖像的背景被移除，只有徽標仍然可見。

當前結果：當我單擊 function 時，整個圖像被刪除

問題出在哪里？

這是我會做的一個小例子：

http://jsfiddle.net/loktar/BtbSM/

另一個例子：

加載有背景的圖像

單擊時，圖像必須沒有背景

Answer 1

對於給定的圖像，您需要保留藍色部分並刪除灰色部分

• 藍色部分的紅色通道值低（<3）
• 灰色部分的紅色通道的值是~100

您可以安全地移除所有紅色通道大於10的像素，因此這部分代碼變為

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i];


    if(r > 10) { 
        // overwrite gray pixel with white pixel
        pix[i] = pix[i+1] = pix[i+2] = 255;
        // alpha channel
        pix[i+3] = 255;
    }
}

當然，這個腳本不能處理其他顏色不同的圖像，因為它的信息是硬編碼的。