html5 canvas抠图的方法
<!DOCTYPE html> <html> <body style="backgournd:#000"> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="black"; ctx.fillRect(0,0,300,150); ctx.fillStyle="#F00"; ctx.fillRect(10,10,50,50); function koutu() { const imgData = ctx.getImageData(0, 0, 300, 150) for (let i = 0; i < imgData.data.length / 4; i++) { let r = imgData.data[i * 4 + 0] let g = imgData.data[i * 4 + 1] let b = imgData.data[i * 4 + 2] if (r >= 255 && g >= 0 && b >= 0) { imgData.data[i * 4 + 3] = 0 // 通过把 Alpha 值设为 0 , 来使像素透明 } } ctx.putImageData(imgData, 0, 0) } </script> <button onclick="koutu()">抠图</button> </body> </html>
https://codepen.io/a6965921/pen/WNGBQRv
ps:这种方法会产生锯齿 产生原因可以看这个 https://baijiahao.baidu.com/s?id=1668805453803428884&wfr=spider&for=pc
去除锯齿有3个方案
1 选择颜色范围(一定更要用白色 白色好弄一点)
因为边缘平滑都是用了边缘用了渐变
for (let i = 0; i < imgData.data.length; i += 4) { let r = imgData.data[i], g = imgData.data[i + 1], b = imgData.data[i + 2]; // 色值在250-256之间都认为是白色 if ([r, g, b].every(v => v < 256 && v > 80)) { imgData.data[i + 3] = 0; // 把白色改成透明的 } }
2 用高分辨率
宽度高度设置高一点
3 加描边
4