p5.j​​s Í 如何将前 N 帧作为图像循环播放？

Posted 2023-03-16

【中文标题】p5.j​​s Í 如何将前 N 帧作为图像循环播放？

【英文标题】：p5.js Í How do I play first N frames as images in a loop?

【发布时间】：2021-12-18 05:24:43

【问题描述】：

在下面的代码中我想：

将相机拍摄的前 5 秒保存为帧 然后每次在 draw() 循环中，我想在画布上绘制第一帧，然后在下一个绘制循环中绘制第二帧，依此类推，直到我到达终点并从顶部开始。

但是，这不起作用，我相信这是因为每个帧的 imageData 是一个 data:image/octet-stream;base64,.... 字符串，我不确定如何在画布上绘制。

const FRAME_RATE = 10
const CAPTURE_DURATION = 5 // secs

let framesCaptured = []
let i = 0

function setup() 
  frameRate(FRAME_RATE)
  
  let video = createCapture(VIDEO)
  
  video.hide()
  
  createCanvas(640, 480)
  
  saveFrames('frames', 'png', CAPTURE_DURATION, FRAME_RATE, (frames) => 
    framesCaptured = frames.map(( imageData ) => 
      return imageData
    )
  )


function draw() 

  if (i < framesCaptured.length) 
    image(loadImage(framesCaptured[i]), 0, 0)
    i = i === framesCaptured.length - 1 ? 0 : i+1
  

顺便说一句，重要的是我可以访问并循环遍历各个帧图像，因为我稍后会将它们发送到服务器。

【参考方案1】：

LoadImage 可以处理 base64 编码的图像，但您必须在字符串前面添加“data:image/png;base64”。 你可以试试 loadImage("data:image/png;base64,"+framesCaptured[i])

(https://p5js.org/reference/#/p5/loadImage)

【讨论】：

恐怕我已经试过了，谢谢。

framesCaptured[i] 已经包含 data:... 前缀，但它是 data:image/octet-stream;base64, ....