iT邦幫忙

2022 iThome 鐵人賽

DAY 22
0

將 canvas 的影像轉換成 webp

const convetImage = (canvas: HTMLCanvasElement) => new Promise<Blob | null>((resolve) => {
  canvas.toBlob((v) => resolve(v), 'image/webp', 1);
});

要特別注意的是,根據 Firefox 的實做,它的 webp 不能切換成無損模式。^firefox-webp

實作

我們要準備兩支程式,它們之間使用 Socket.io 溝通:

  • Render (R3F)
    • 用來渲染 3D 的網頁
  • Server
    • 用來接收影像的伺服器
    • 用 child_process 使用 ffmpeg 和 dwebp

沒錯,前面鋪陳一大堆東西在這個小小的 POC 上就幾乎全用上了,具體的實作內容請看程式碼

效果


上一篇
Day 21 R3F 多重鏡頭
下一篇
Day 23 R3F 多重鏡頭 Refactoring (佔位)
系列文
關於用 Javascript (Typescript) Stack 打造某種 Backend 3D Rendering 的東東這檔事23
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言