html5 canvas抠图的方法详解编程语言

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>

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 加描边

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/18904.html

html5 canvas抠图的方法详解编程语言

相关推荐

发表回复