html5 canvas抠图的方法

2023-11-09 02:05•html•阅读 1413

html5 canvas抠图的方法

<!DOCTYPE html>
<html>
<body >

<canvas  width="300" height="150" >
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
  ctx.fill;
ctx.fillRect(0,0,300,150);
ctx.fill;
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 加描边