如何在html5和javascript中编辑画布图像中的像素并移除白色背景

如果我加载一个图像，我如何循环通过它的所有像素，并将白色像素（或我指定的任何颜色）变为透明

我有一个想法如何做到这一点，但循环过程应该像一个二维数组，所以它将涉及两个for循环

我在想，我会从第一个像素的顶行开始，向右迭代，如果是白色像素，那么我将其变为透明，然后向右移动1个像素，如果不是白色，那么我停止。然后在同一行中，我从最左边的像素开始，检查，如果是白色，我将其变为透明，然后向左移动1个像素，以此类推

然后我向下移动一行，重复整个过程

---

这样，我就不会删除实际图像中的任何白色像素。

使用

getImageData

和

putImageData

非常简单，只需注意，图像越大，性能就会受到相当大的影响。您只需确定当前像素是否为白色，然后将其alpha更改为0

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

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

        // If its white then change it
        if(r == 255 && g == 255 && b == 255){ 
            // Change the white to whatever.
            pix[i] = newColor.r;
            pix[i+1] = newColor.g;
            pix[i+2] = newColor.b;
            pix[i+3] = newColor.a;
        }
}

ctx.putImageData(imgd, 0, 0);​

更多资源

---

Loktar可能有一种“有效”的方法，但它的性能相当糟糕。如果你有很多图像，你不想让你的网站耗尽笔记本电脑/移动设备的电池，或者你只想提高速度，这可能会成为一个问题。这里有一个更有效的方法。点击“RunCodeSnippet”按钮，可以看到它的运行演示

“使用严格”
让fileInput=document.getElementById（'fileInput'），
theCANVAS=document.getElementById（'theCANVAS'），
canvasctx=canvas.getContext（'2d'），
imgTMP=document.getElementById（'imgTMP'），
rComponent=document.getElementById（'r'），
gComponent=document.getElementById（'g'），
bComponent=document.getElementById（'b'），
aComponent=document.getElementById（'a'），
transColor=“rgba（255，255，255，1）”，
转码=0xFFFFFF；
让颜色透明=
功能（画布上下文、透明度、宽度、高度）{
//所有的魔法都发生在那里
让theImageData=canvasContext.getImageData（0，0，宽度，高度），
theImageDataBufferTMP=新阵列缓冲区（theImageData.data.length），
ImageDataClamped8TMP=新单元8ClampedArray（ImageDataBufferTMP），
theImageDataUint32TMP=新UINT32阵列（theImageDataBufferTMP），
n=图像数据单元32tmp.length；
ImageDataClamped8tmp.set（ImageData.data）；
imgDataLoop:while（n--）{
//效率最高：
如果（图像数据单元32tmp[n]！==透明）
继续imgDataLoop；
theImageDataUint32TMP[n]=0x00000000；//使其透明
}
magedata.data.set（magedataclamped8tmp）；
计算机图像数据（图像数据，0，0）；
},
downloadCanvas=函数（downloadfilename）{
canvas.toBlob（函数（theIMGblob）{
var thedataURL=URL.createObjectURL（theIMGblob），
theAtagLink=document.createElement（'a'）；
theAtagLink.download='（已处理）'+下载文件名；
document.body.appendChild（theAtagLink）；
theAtagLink.href=数据URL；
theAtagLink.click（）；
});
};
fileInput.onchange=函数（fileevent）{
让efiles=fileevent.target.files，
localTransColor=transColor，
localTransCode=转码；
设cur=efiles.length，
nextfile=函数（）{
如果（！cur--）{
imgTMP.src=''；
返回；
}
设fr=newfilereader（）；
console.log（efiles[cur]）；
fr.onload=函数（dataevt）{
fr.onload=null；
让ArrayBuffer=dataevt.target.result，
theblob=新Blob（[theArrayBuffer]）；
imgTMP.src=URL.createObjectURL（theblob）；
imgTMP.onload=函数（）{
imgTMP.onload=null；
让图像宽度=imgTMP.naturalWidth，
图像高度=imgTMP.自然高度；
canvas.width=图像宽度；
canvas.height=图像高度；
canvasctx.fillStyle=localTransColor；
canvasctx.clearRect(
0,
0,
他们的照片，
他们的形象
);
绘制图像（imgTMP，0,0）；
使颜色透明(
Canvasctx，
本地转码，
他们的照片，
他们的形象
);
//现在，下载该文件：
下载画布（efiles[cur].name）；
//最后，继续处理下一个文件
nextfile（）；
};
};
fr.readAsArrayBuffer（efiles[cur]）；
};
nextfile（）；
}
rComponent.oninput=gComponent.oninput=
b组件.oninput=a组件.oninput=
函数（）{
rComponent.value=Math.max（0，Math.min（rComponent.value，255））；
gComponent.value=Math.max（0，Math.min（gComponent.value，255））；
bComponent.value=Math.max（0，Math.min（bComponent.value，255））；
aComponent.value=Math.max（0，Math.min（aComponent.value，255））；
};
rComponent.onchange=gComponent.onchange=
bComponent.onchange=a Component.onchange=
函数（）{
transColor='rgba'+
rComponent.value+'，'+
gComponent.value+'，'+
b组件.value+'，'+
aComponent.value/255+'，'+
')';
//rgba的数字等价
转码=
rComponent.value*0x00000001+
gComponent.value*0x00000100+
b组件值*0x00010000+
aComponent.value*0x01000000；
};
rgba（，，，）


输入[type=number]{width:3em}屏幕{display:none}
您可以使用图像处理框架来不手动处理像素数据

在给定颜色的情况下，可以使用一条直线将所有像素设置为透明：

输入图像：


结果：


可运行示例：


var canvas=document.getElementById（“c
 // If its white or close then change it
    if(r >=230 && g >= 230 && b >= 230){ 
        // Change the white to whatever.
        pix[i] = newColor.r;
        pix[i+1] = newColor.g;
        pix[i+2] = newColor.b;
        pix[i+3] = newColor.a;
    }

image.setColorToAlpha(0, 0);