html5 canvas摳圖的方法

本文轉載自查看原文 2021-01-22 20:45 489 html5

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html5 canvas+js實現ps鋼筆摳圖（速摳圖 www.sukoutu.com） HTML5 Canvas繪圖詳解 drawImage() 方法有圖有真相！ HTML5 canvas getImageData() 方法 HTML5 canvas drawImage() 方法 html5 canvas畫流程圖平面圖之HTML5、Canvas、SVG 通過Html5 Canvas畫柱狀圖 HTML5 Canvas制作雷達圖實戰 HTML5 canvas save和restore方法講解打印html5中Canvas的方法