Canvas Context2D.drawImage（）为HTMLImageElement抛出类型错误，即使目标类型正确

Question

我正在尝试调整使用base64编码源的图像的大小。要做到这一点，我尝试使用canvas元素的2d绘制图像方法作为画布，这是我想缩小到的一面。

这就是我的方法：

resizeImage (base64Image) {
  let vm = this

  return new Promise((resolve, reject) => {
    // let img = document.createElement('img') // I've tried both with the Image constructor and with the document createElement function
    let img = new Image()

    img.onload = () => {
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')

      canvas.width = vm.resizeDimensions.width
      canvas.height = vm.resizeDimensions.height

      // at this point, the `this` context is referring to the img element we created
      // this is also the point at which I hit the type error
      ctx.drawImage(this, 0, 0, vm.resizeDimensions.width, vm.resizeDimensions.height)
      let uri = canvas.toDataUrl()
      resolve(uri)
    }

    img.src = base64Image
  })
},

让我循环的东西是，当我在调试器中单步执行并执行自己的类型检查时，创建的图像（无论构造方法如何）是 drawImage方法的有效类型之一：

抱歉横过箭头。我尝试录制gif但文件大小太大而无法上传到stackoverflow 。

这里肯定有我失踪的东西。为什么即使我可以确认garget确实是正确的类型，也会抛出类型错误？

更多信息：这是一个大型项目的电子/ vue原型。如果你想深入研究，那么带有这个bug的代码就在这个项目的分支和子文件夹中：https://github.com/chris-schmitz/matching-game/tree/image-encoding-prototype-errors/prototypes/saving-and-encoding-images。

更新

这里是onload回调中内容的截图：

此外，我记录的发生错误的gif可以找到here：