使用body-fix识别人物+人物遮盖弹幕

作者: littlesunn | 来源:发表于2023-02-03 09:59 被阅读0次

使用body-fix识别人物+人物遮盖弹幕
2017-12-01
未经他人苦，莫劝他人善
Flutter · Python AI 弹幕播放器来袭
Ps抠图、去背景的方法总结
2017.7.12 图片模式识别
《PPT设计思维》——幻灯片背景选择4大原则
PS
【水彩】小人物
权力的游戏

使用前准备;

图片自己找个带人物的图片;
下面地址打开保存为 tfjs.js
https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2

3.下面地址打开保存为 body-pix.js
https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="tfjs.js"></script>
  <script src="body-pix.js"></script>
</head>

<body>
  <canvas id="cv" width="800" height="530" style="display: none;"></canvas>
  <img id="img" src="57410e4667f97362aa44af920924938c.jpeg" width="800" height="530" style="display: none;" />
  <div class="video-wrap" style="width:800px;height:530px;border: 1px solid;">
    <div class="barrage-wrap" id="bw">
      <div class="barrage barrage1">
        测试弹幕111
      </div>
      <div class="barrage barrage2">
        测试弹幕222
      </div>
      <div class="barrage barrage3">
        测试弹幕333
      </div>
    </div>
  </div>
  <script>
    let model = {
      architecture: 'MobileNetV1',
      outputStride: 8,   //8,16  值越小，输出分辨率越大，模型越精确，速度越慢
      multiplier: 1,   // 0.5,0.75,1  值越大，层越大，模型越精确，速度越慢
      quantBytes: 2    /* 1,2,4  此参数控制用于权重量化的字节  
                             '4. 每个浮点数 4 个字节（无量化）。最高精度&原始模型尺寸',
                             '2. 每个浮点数 2 个字节。精度略低，模型尺寸减小 2 倍',
                             '1. 每个浮点数 1 个字节。精度降低, 模型尺寸减少 4 倍' 
                           */
    }
    bodyPix.load(model).then(function (net) {
      const imageElement = document.getElementById('img');
      net.segmentPerson(imageElement).then(segmentation => {
        const foregroundColor = { r: 0, g: 0, b: 0, a: 0 }    // 前景色  设为完全透明
        const backgroundColor = { r: 0, g: 0, b: 0, a: 255 }   // 背景色
        let backgroundDarkeningMask = bodyPix.toMask(
          segmentation,
          foregroundColor,
          backgroundColor
        )
        if (backgroundDarkeningMask) {
          let context = cv.getContext('2d');
          // 合成
          context.putImageData(backgroundDarkeningMask, 0, 0);
          let url = cv.toDataURL("image/png");
          bw.style['-webkit-mask-image'] = `url(${url})`;
          document.querySelectorAll(".barrage").forEach(item => {
            item.classList.add("active")
            // item.style.animation = `move 3s forwards`
          })
        }
      })
    });
  </script>

</body>

</html>
<style>
  .video-wrap {
    background-image: url("57410e4667f97362aa44af920924938c.jpeg");
    background-size: 100% 100%;
    position: relative;
  }

  .video-wrap>.barrage-wrap {
    -webkit-mask-image: url('/test2.png');
    height: 100%;
  }

  /* 弹幕演示 */
  .barrage {
    white-space: nowrap;
    position: absolute;
    left: 0px;
    top: 100px;
    font-size: 24px;
    color: #fff;
    font-weight: bolder;
    transition: 3s;
  }

  .barrage2 {
    left: 30px;
    top: 200px;
  }

  .barrage3 {
    left: 70px;
    top: 300px;
  }

  .barrage.active {
    left: 800px;
  }
</style>