Question

我将HTML5视频元素中的帧绘制到这样的画布：

＆＃13;

ICommand

＆＃13;

const wrapperElement = document.getElementById('wrapper')
const videoElement = document.getElementById('video')
  
videoElement.onloadeddata = function () {
  const width = videoElement.videoWidth
  const height = videoElement.videoHeight

  const canvasElement = document.createElement('canvas')  
  canvasElement.width = width
  canvasElement.height = height

  wrapperElement.appendChild(canvasElement) // is this necessary?

  const ctx = canvasElement.getContext('2d')
  ctx.drawImage(videoElement, 0, 0, width, height)

  const imageData = ctx.getImageData(0, 0, width, height) // what I need!
  
  // doing something with imageData
}

＆＃13;

我只需要画布来获取原始图像数据，因为视频元素API不提供像<div id="wrapper"> <video id="video" loop autoplay muted> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <br /> </div>这样的方法。因此，我不希望画布在我的页面上可见。我知道我可以通过制作getImageData来实现这一点，但我想知道它是否必须存在于DOM中。仅仅通过JavaScript创建画布然后使用它的API就足够了吗？它在Chrome 63中似乎对我有用。我虽然犹豫不决，因为任何使用此模式的教程也总是在DOM中插入画布。

Answer 1

我犹豫不决，因为使用此模式的任何教程也总是在DOM中插入画布。

是的，您可以安全地使用canvas而不将其插入DOM树中。 DOM提供了一种实际显示画布内容的方法，但不需要处理其内容。

（Tuts可能假设你真的想看看画布上发生了什么。）

HTML5 canvas API是否可以在不向DOM添加元素的情况下工作？

1 个答案: