javascript - 未捕获类型错误 : Failed to execute 'drawImage' on Vue. js

Question

我有一个 vue.js 应用程序，它可以拍摄照片并将其发送到照片过滤器页面。在此过滤器页面中，我有一个按钮可以发布过滤后的照片。我可以过滤拍摄的照片，但无法发布。我的错误在这里；

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

我的代码在这里；

async sendPhoto () {
      const canvas = document.createElement('canvas')
      canvas.width = document
        .getElementById('image')
        .getAttribute('data-original-width')
      canvas.height = document
        .getElementById('image')
        .getAttribute('data-original-height')
      const ctx = canvas.getContext('2d')
      ctx.filter = this.filters.filter

      var img = document.createElement('img')
      img.src = this.image
      img.onload = function () {
        ctx.drawImage(this.image, 0, 0, canvas.width, canvas.height)
        const anchor = document.createElement('a')
        anchor.href = canvas.toDataURL()
        anchor.sendPhoto = this.img.src
        anchor.click()
      }
      console.log('canvas.toDataURL()', canvas.toDataURL())
      if (canvas.toDataURL() !== null && canvas.toDataURL() !== undefined) {
        const resBody = await this.$phoneAPI.imgYukle(canvas.toDataURL()) // burda filterli fotoyu tekrardan uploadlamak gerekiyo
        console.log('resBody', JSON.stringify(resBody))
        // await this.instagrampostStory({ message: canvas.toDataURL() })
        this.message = ''
      }
    },
    defaultImage () {
      return DefaultImage
    }
  }
}

感谢您的帮助!

Answer 1

根据drawImage documentation ，第一个参数采用 HTMLImageElement。

所以，而不是

img.onload = function () {
  ctx.drawImage(this.image, 0, 0, canvas.width, canvas.height) <-- change this line
  const anchor = document.createElement('a')
  anchor.href = canvas.toDataURL()
  anchor.sendPhoto = this.img.src
  anchor.click()
}

应该是

img.onload = function () {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)  <-- to this line
  const anchor = document.createElement('a')
  anchor.href = canvas.toDataURL()
  anchor.sendPhoto = this.img.src
  anchor.click()
}