这边TS为什么会获取不到canvas呢？

Question

需求是想把canvas转成img替换掉,为什么会报错呢

<el-col  v-for="(item,index) in 10">
  <div class="canvas-item">
    <qrcode-vue value="123" :size="150" /> // 这边是个canvas
  </div>
</div>

const canvasToImg = () => {
  const canvasItems = document.querySelectorAll(".canvas-item")
  canvasItems.forEach((item) => {
    const { canvas } = item
    if (canvas) {
      const image = new Image()
      image.src = canvas.toDataURL("image/png")
      item.html(image)
    }
  })
}

Answer 1

它返回的是一个列表你要遍历一下

const canvasToImg = () => {
  const canvasItems = document.querySelectorAll(".canvas-item")
  canvasItems.forEach((item) => {
    const canvas = item.querySelector('canvas');
    if (canvas) {
      const image = new Image()
      image.src = canvas.toDataURL("image/png")
      item.innerHTML = ''; // 清空原有内容
      item.appendChild(image); // 添加新的Image元素
    }
  })
}

Answer 2

const canvasList = document.querySelectorAll('.canvas-item canvas') as NodeListOf<HTMLCanvasElement>;
  canvasList.forEach((canvas) => {
    // .....
  })