Spark AR: Spark AR 換背景 & Fabric.js

基礎用法看偶的筆記

要實作換背景 必須用到 Background Segmentation

• 官方連結: Background Segmentation

  • 土魠魚 Background Segmentation

  • 土魠魚 Hair Segmentation

• 有三種 Segmentation

  • Person：把人和背景分開
  • Hair：分頭髮
  • Skin：把辨別認為是皮膚的部分抓出來

好奧運看得太刺激了！！！

先去跑步！　享受一下氣氛！　偶自己的奧運！！！

ＧＯＧＯＧＯＧＯ！　跑完再回來寫　：）

熱跑結束 自己的奧運!! 拍到水水圖! 開心地拉!!

跑得很開心~ 看到很多充滿自信的水水大姊姊!!

討取水水的風景 就來實作一下 !

小鸚鵡可以拖拉 ~~~

Spark AR 換背景效果 跟這一樣 不過小鸚鵡變 人 XDDD

• 想到要用 Fabric.js 玩一下 side project
  • fabric 加背景
  • fabric 加入圖片

怎麼寫的

<!-- CDN  -->
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"
  integrity="sha512-ACqMrfAtm537AWzgx/xQ57JnFxXeq8RylQMGg4y/e6M2ew4Z8NycE8aId/Bt2ZE+w1gNsox3MgwxKl7SGMRdtA=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

<canvas id="myCanvas"></canvas>

<script>
  const canvas = new fabric.Canvas("myCanvas");
  canvas.setHeight(600);
  canvas.setWidth(400);

  // add background
  fabric.Image.fromURL("https://i.imgur.com/ulXDARA.jpg", function (myImg) {
    canvas.setBackgroundImage(myImg, canvas.renderAll.bind(canvas), {
      scaleX: canvas.width / myImg.width,
      scaleY: canvas.height / myImg.height,
    });
  });

  // add cute bird
  fabric.Image.fromURL("https://i.imgur.com/LH5MWcH.png", function (myImg2) {
    canvas.add(myImg2.set({ left: 250, top: 250 }).scale(0.25));
  });
</script>

好 Spark AR 還是妹有 XDD

睡飽再來寫~ 掰掰~