背景

手机群控功能，需要实时展示手机内容
后台用ws传一个blob格式的数据，前端解析出blob链接（内存）

  1. const blob = new Blob([message.data], { type: 'image/jpeg' })
  2. const blobUrl = window.URL.createObjectURL(blob))
  3. console.log(blobUrl) // blob:http://localhost:8086/f8d0cb57-3b93-4272-a293-d96be7bb442e

技术分析

  1. 直接img标签： <img :src='blobUrl' /> (blobUrl是从上面获取的)
  2. canvas: drawImage
  1. this.canvas = document.getElementById('canvas')
  2. // 用canvas绘制视频流,效率比直接img加载要高
  3. this.canvas2D = this.canvas.getContext('2d')
  4. this.img = new Image()
  5. const width = 238
  6. const height = 423
  7. this.img.onload = () => {
  8.   this.canvas.width = width
  9.   this.canvas.height = height
  10.   this.canvas2D.drawImage(this.img, 0, 0, width, height)
  11. }
  12. this.canvas.img = this.img

很明显直接用img标签简单方便，但canvas是否性能更好？ 最终如何选择？

先给结论：此场景用 1.直接img标签 （为什么要讨论canvas因为之前的代码用的是这个。。）

使用canvas绘制图片的场景：

通常，不会使用画布（canvas）来显示单个静态图像。

当我们需要在一张画布上展示多个img时，例如，如果您有“man”，“block”和“ monster”的图像，并且每秒将它们渲染到画布上30次，并根据例如关键事件更新它们的相对位置，那么您基本上已经创建了一个游戏。此时适用canvas绘制图片

如果仅显示单个静态图像，则与仅使用标签没有什么不同，直接用img，因为这样可以使内容更清晰。

用于要使用JavaScript动态生成/处理的图形。