Uncaught TypeError: Failed to execute 'drawImage' on Vue.js

Question

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

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()
}

Answer 2

我现在得到了图片，但是 base64 图像字符串返回为空我无法修复它

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAHcCAYAAACj995eAAAckUlEQVR4Xu3WQREAAAgCQelf2h43awMWH+wcAQIECBAgQIAAAQIZgWWSCEKAAAECBAgQIECAwBn4noAAAQIECBAgQIBASMDAD5UpCgECBAgQIECAAAED3w8QIECAAAECBAgQCAkY+KEyRSFAgAABAgQIECBg4PsBAgQIECBAgAABAiEBAz9UpigECBAgQIAAAQIEDHw/QIAAAQIECBAgQCAkYOCHyhSFAAECBAgQIECAgIHvBwgQIECAAAECBAiEBAz8UJmiECBAgAABAgQIEDDw/QABAgQIECBAgACBkICBHypTFAIECBAgQIAAAQIGvh8gQIAAAQIECBAgEBIw8ENlikKAAAECBAgQIEDAwPcDBAgQIECAAAECBEICBn6oTFEIECBAgAABAgQIGPh+gAABAgQIECBAgEBIwMAPlSkKAQIECBAgQIAAAQPfDxAgQIAAAQIECBAICRj4oTJFIUCAAAECBAgQIGDg+wECBAgQIECAAAECIQEDP1SmKAQIECBAgAABAgQMfD9AgAABAgQIECBAICRg4IfKFIUAAQIECBAgQICAge8HCBAgQIAAAQIECIQEDPxQmaIQIECAAAECBAgQMPD9AAECBAgQIECAAIGQgIEfKlMUAgQIECBAgAABAga+HyBAgAABAgQIECAQEjDwQ2WKQoAAAQIECBAgQMDA9wMECBAgQIAAAQIEQgIGfqhMUQgQIECAAAECBAgY+H6AAAECBAgQIECAQEjAwA+VKQoBAgQIECBAgAABA98PECBAgAABAgQIEAgJGPihMkUhQIAAAQIECBAgYOD7AQIECBAgQIAAAQIhAQM/VKYoBAgQIECAAAECBAx8P0CAAAECBAgQIEAgJGDgh8oUhQABAgQIECBAgICB7wcIECBAgAABAgQIhAQM/FCZohAgQIAAAQIECBAw8P0AAQIECBAgQIAAgZCAgR8qUxQCBAgQIECAAAECBr4fIECAAAECBAgQIBASMPBDZYpCgAABAgQIECBAwMD3AwQIECBAgAABAgRCAgZ+qExRCBAgQIAAAQIECBj4foAAAQIECBAgQIBASMDAD5UpCgECBAgQIECAAAED3w8QIECAAAECBAgQCAkY+KEyRSFAgAABAgQIECBg4PsBAgQIECBAgAABAiEBAz9UpigECBAgQIAAAQIEDHw/QIAAAQIECBAgQCAkYOCHyhSFAAECBAgQIECAgIHvBwgQIECAAAECBAiEBAz8UJmiECBAgAABAgQIEDDw/QABAgQIECBAgACBkICBHypTFAIECBAgQIAAAQIGvh8gQIAAAQIECBAgEBIw8ENlikKAAAECBAgQIEDAwPcDBAgQIECAAAECBEICBn6oTFEIECBAgAABAgQIGPh+gAABAgQIECBAgEBIwMAPlSkKAQIECBAgQIAAAQPfDxAgQIAAAQIECBAICRj4oTJFIUCAAAECBAgQIGDg+wECBAgQIECAAAECIQEDP1SmKAQIECBAgAABAgQMfD9AgAABAgQIECBAICRg4IfKFIUAAQIECBAgQICAge8HCBAgQIAAAQIECIQEDPxQmaIQIECAAAECBAgQMPD9AAECBAgQIECAAIGQgIEfKlMUAgQIECBAgAABAga+HyBAgAABAgQIECAQEjDwQ2WKQoAAAQIECBAgQMDA9wMECBAgQIAAAQIEQgIGfqhMUQgQIECAAAECBAgY+H6AAAECBAgQIECAQEjAwA+VKQoBAgQIECBAgAABA98PECBAgAABAgQIEAgJGPihMkUhQIAAAQIECBAgYOD7AQIECBAgQIAAAQIhAQM/VKYoBAgQIECAAAECBAx8P0CAAAECBAgQIEAgJGDgh8oUhQABAgQIECBAgICB7wcIECBAgAABAgQIhAQM/FCZohAgQIAAAQIECBAw8P0AAQIECBAgQIAAgZCAgR8qUxQCBAgQIECAAAECBr4fIECAAAECBAgQIBASMPBDZYpCgAABAgQIECBAwMD3AwQIECBAgAABAgRCAgZ+qExRCBAgQIAAAQIECBj4foAAAQIECBAgQIBASMDAD5UpCgECBAgQIECAAAED3w8QIECAAAECBAgQCAkY+KEyRSFAgAABAgQIECBg4PsBAgQIECBAgAABAiEBAz9UpigECBAgQIAAAQIEDHw/QIAAAQIECBAgQCAkYOCHyhSFAAECBAgQIECAgIHvBwgQIECAAAECBAiEBAz8UJmiECBAgAABAgQIEDDw/QABAgQIECBAgACBkICBHypTFAIECBAgQIAAAQIGvh8gQIAAAQIECBAgEBIw8ENlikKAAAECBAgQIEDAwPcDBAgQIECAAAECBEICBn6oTFEIECBAgAABAgQIGPh+gAABAgQIECBAgEBIwMAPlSkKAQIECBAgQIAAAQPfDxAgQIAAAQIECBAICRj4oTJFIUCAAAECBAgQIGDg+wECBAgQIECAAAECIQEDP1SmKAQIECBAgAABAgQMfD9AgAABAgQIECBAICRg4IfKFIUAAQIECBAgQICAge8HCBAgQIAAAQIECIQEDPxQmaIQIECAAAECBAgQMPD9AAECBAgQIECAAIGQgIEfKlMUAgQIECBAgAABAga+HyBAgAABAgQIECAQEjDwQ2WKQoAAAQIECBAgQMDA9wMECBAgQIAAAQIEQgIGfqhMUQgQIECAAAECBAgY+H6AAAECBAgQIECAQEjAwA+VKQoBAgQIECBAgAABA98PECBAgAABAgQIEAgJGPihMkUhQIAAAQIECBAgYOD7AQIECBAgQIAAAQIhAQM/VKYoBAgQIECAAAECBAx8P0CAAAECBAgQIEAgJGDgh8oUhQABAgQIECBAgICB7wcIECBAgAABAgQIhAQM/FCZohAgQIAAAQIECBAw8P0AAQIECBAgQIAAgZCAgR8qUxQCBAgQIECAAAECBr4fIECAAAECBAgQIBASMPBDZYpCgAABAgQIECBAwMD3AwQIECBAgAABAgRCAgZ+qExRCBAgQIAAAQIECBj4foAAAQIECBAgQIBASMDAD5UpCgECBAgQIECAAAED3w8QIECAAAECBAgQCAkY+KEyRSFAgAABAgQIECBg4PsBAgQIECBAgAABAiEBAz9UpigECBAgQIAAAQIEDHw/QIAAAQIECBAgQCAkYOCHyhSFAAECBAgQIECAgIHvBwgQIECAAAECBAiEBAz8UJmiECBAgAABAgQIEDDw/QABAgQIECBAgACBkICBHypTFAIECBAgQIAAAQIGvh8gQIAAAQIECBAgEBIw8ENlikKAAAECBAgQIEDAwPcDBAgQIECAAAECBEICBn6oTFEIECBAgAABAgQIGPh+gAABAgQIECBAgEBIwMAPlSkKAQIECBAgQIAAAQPfDxAgQIAAAQIECBAICRj4oTJFIUCAAAECBAgQIGDg+wECBAgQIECAAAECIQEDP1SmKAQIECBAgAABAgQMfD9AgAABAgQIECBAICRg4IfKFIUAAQIECBAgQICAge8HCBAgQIAAAQIECIQEDPxQmaIQIECAAAECBAgQMPD9AAECBAgQIECAAIGQgIEfKlMUAgQIECBAgAABAga+HyBAgAABAgQIECAQEjDwQ2WKQoAAAQIECBAgQMDA9wMECBAgQIAAAQIEQgIGfqhMUQgQIECAAAECBAgY+H6AAAECBAgQIECAQEjAwA+VKQoBAgQIECBAgAABA98PECBAgAABAgQIEAgJGPihMkUhQIAAAQIECBAgYOD7AQIECBAgQIAAAQIhAQM/VKYoBAgQIECAAAECBAx8P0CAAAECBAgQIEAgJGDgh8oUhQABAgQIECBAgICB7wcIECBAgAABAgQIhAQM/FCZohAgQIAAAQIECBAw8P0AAQIECBAgQIAAgZCAgR8qUxQCBAgQIECAAAECBr4fIECAAAECBAgQIBASMPBDZYpCgAABAgQIECBAwMD3AwQIECBAgAABAgRCAgZ+qExRCBAgQIAAAQIECBj4foAAAQIECBAgQIBASMDAD5UpCgECBAgQIECAAAED3w8QIECAAAECBAgQCAkY+KEyRSFAgAABAgQIECBg4PsBAgQIECBAgAABAiEBAz9UpigECBAgQIAAAQIEDHw/QIAAAQIECBAgQCAkYOCHyhSFAAECBAgQIECAgIHvBwgQIECAAAECBAiEBAz8UJmiECBAgAABAgQIEDDw/QABAgQIECBAgACBkICBHypTFAIECBAgQIAAAQIGvh8gQIAAAQIECBAgEBIw8ENlikKAAAECBAgQIEDAwPcDBAgQIECAAAECBEICBn6oTFEIECBAgAABAgQIGPh+gAABAgQIECBAgEBIwMAPlSkKAQIECBAgQIAAAQPfDxAgQIAAAQIECBAICRj4oTJFIUCAAAECBAgQIGDg+wECBAgQIECAAAECIQEDP1SmKAQIECBAgAABAgQMfD9AgAABAgQIECBAICRg4IfKFIUAAQIECBAgQICAge8HCBAgQIAAAQIECIQEDPxQmaIQIECAAAECBAgQMPD9AAECBAgQIECAAIGQgIEfKlMUAgQIECBAgAABAga+HyBAgAABAgQIECAQEjDwQ2WKQoAAAQIECBAgQMDA9wMECBAgQIAAAQIEQgIGfqhMUQgQIECAAAECBAgY+H6AAAECBAgQIECAQEjAwA+VKQoBAgQIECBAgAABA98PECBAgAABAgQIEAgJGPihMkUhQIAAAQIECBAgYOD7AQIECBAgQIAAAQIhAQM/VKYoBAgQIECAAAECBAx8P0CAAAECBAgQIEAgJGDgh8oUhQABAgQIECBAgICB7wcIECBAgAABAgQIhAQM/FCZohAgQIAAAQIECBAw8P0AAQIECBAgQIAAgZCAgR8qUxQCBAgQIECAAAECBr4fIECAAAECBAgQIBASMPBDZYpCgAABAgQIECBAwMD3AwQIECBAgAABAgRCAgZ+qExRCBAgQIAAAQIECBj4foAAAQIECBAgQIBASMDAD5UpCgECBAgQIECAAAED3w8QIECAAAECBAgQCAkY+KEyRSFAgAABAgQIECBg4PsBAgQIECBAgAABAiEBAz9UpigECBAgQIAAAQIEDHw/QIAAAQIECBAgQCAkYOCHyhSFAAECBAgQIECAgIHvBwgQIECAAAECBAiEBAz8UJmiECBAgAABAgQIEDDw/QABAgQIECBAgACBkICBHypTFAIECBAgQIAAAQIGvh8gQIAAAQIECBAgEBIw8ENlikKAAAECBAgQIEDAwPcDBAgQIECAAAECBEICBn6oTFEIECBAgAABAgQIGPh+gAABAgQIECBAgEBIwMAPlSkKAQIECBAgQIAAAQPfDxAgQIAAAQIECBAICRj4oTJFIUCAAAECBAgQIGDg+wECBAgQIECAAAECIQEDP1SmKAQIECBAgAABAgQMfD9AgAABAgQIECBAICRg4IfKFIUAAQIECBAgQICAge8HCBAgQIAAAQIECIQEDPxQmaIQIECAAAECBAgQMPD9AAECBAgQIECAAIGQgIEfKlMUAgQIECBAgAABAga+HyBAgAABAgQIECAQEjDwQ2WKQoAAAQIECBAgQMDA9wMECBAgQIAAAQIEQgIGfqhMUQgQIECAAAECBAgY+H6AAAECBAgQIECAQEjAwA+VKQoBAgQIECBAgAABA98PECBAgAABAgQIEAgJGPihMkUhQIAAAQIECBAgYOD7AQIECBAgQIAAAQIhAQM/VKYoBAgQIECAAAECBAx8P0CAAAECBAgQIEAgJGDgh8oUhQABAgQIECBAgICB7wcIECBAgAABAgQIhAQM/FCZohAgQIAAAQIECBAw8P0AAQIECBAgQIAAgZCAgR8qUxQCBAgQIECAAAECBr4fIECAAAECBAgQIBASMPBDZYpCgAABAgQIECBAwMD3AwQIECBAgAABAgRCAgZ+qExRCBAgQIAAAQIECBj4foAAAQIECBAgQIBASMDAD5UpCgECBAgQIECAAAED3w8QIECAAAECBAgQCAkY+KEyRSFAgAABAgQIECBg4PsBAgQIECBAgAABAiEBAz9UpigECBAgQIAAAQIEDHw/QIAAAQIECBAgQCAkYOCHyhSFAAECBAgQIECAgIHvBwgQIECAAAECBAiEBAz8UJmiECBAgAABAgQIEDDw/QABAgQIECBAgACBkICBHypTFAIECBAgQIAAAQIGvh8gQIAAAQIECBAgEBIw8ENlikKAAAECBAgQIEDAwPcDBAgQIECAAAECBEICBn6oTFEIECBAgAABAgQIGPh+gAABAgQIECBAgEBIwMAPlSkKAQIECBAgQIAAAQPfDxAgQIAAAQIECBAICRj4oTJFIUCAAAECBAgQIGDg+wECBAgQIECAAAECIQEDP1SmKAQIECBAgAABAgQMfD9AgAABAgQIECBAICRg4IfKFIUAAQIECBAgQICAge8HCBAgQIAAAQIECIQEDPxQmaIQIECAAAECBAgQMPD9AAECBAgQIECAAIGQgIEfKlMUAgQIECBAgAABAga+HyBAgAABAgQIECAQEjDwQ2WKQoAAAQIECBAgQMDA9wMECBAgQIAAAQIEQgIGfqhMUQgQIECAAAECBAgY+H6AAAECBAgQIECAQEjAwA+VKQoBAgQIECBAgAABA98PECBAgAABAgQIEAgJGPihMkUhQIAAAQIECBAgYOD7AQIECBAgQIAAAQIhAQM/VKYoBAgQIECAAAECBAx8P0CAAAECBAgQIEAgJGDgh8oUhQABAgQIECBAgICB7wcIECBAgAABAgQIhAQM/FCZohAgQIAAAQIECBAw8P0AAQIECBAgQIAAgZCAgR8qUxQCBAgQIECAAAECBr4fIECAAAECBAgQIBASMPBDZYpCgAABAgQIECBAwMD3AwQIECBAgAABAgRCAgZ+qExRCBAgQIAAAQIECBj4foAAAQIECBAgQIBASMDAD5UpCgECBAgQIECAAAED3w8QIECAAAECBAgQCAkY+KEyRSFAgAABAgQIECBg4PsBAgQIECBAgAABAiEBAz9UpigECBAgQIAAAQIEDHw/QIAAAQIECBAgQCAkYOCHyhSFAAECBAgQIECAgIHvBwgQIECAAAECBAiEBAz8UJmiECBAgAABAgQIEDDw/QABAgQIECBAgACBkICBHypTFAIECBAgQIAAAQIGvh8gQIAAAQIECBAgEBIw8ENlikKAAAECBAgQIEDAwPcDBAgQIECAAAECBEICBn6oTFEIECBAgAABAgQIGPh+gAABAgQIECBAgEBIwMAPlSkKAQIECBAgQIAAAQPfDxAgQIAAAQIECBAICRj4oTJFIUCAAAECBAgQIGDg+wECBAgQIECAAAECIQEDP1SmKAQIECBAgAABAgQMfD9AgAABAgQIECBAICRg4IfKFIUAAQIECBAgQICAge8HCBAgQIAAAQIECIQEDPxQmaIQIECAAAECBAgQMPD9AAECBAgQIECAAIGQgIEfKlMUAgQIECBAgAABAga+HyBAgAABAgQIECAQEjDwQ2WKQoAAAQIECBAgQMDA9wMECBAgQIAAAQIEQgIGfqhMUQgQIECAAAECBAgY+H6AAAECBAgQIECAQEjAwA+VKQoBAgQIECBAgAABA98PECBAgAABAgQIEAgJGPihMkUhQIAAAQIECBAgYOD7AQIECBAgQIAAAQIhAQM/VKYoBAgQIECAAAECBAx8P0CAAAECBAgQIEAgJGDgh8oUhQABAgQIECBAgICB7wcIECBAgAABAgQIhAQM/FCZohAgQIAAAQIECBAw8P0AAQIECBAgQIAAgZCAgR8qUxQCBAgQIECAAAECBr4fIECAAAECBAgQIBASMPBDZYpCgAABAgQIECBAwMD3AwQIECBAgAABAgRCAgZ+qExRCBAgQIAAAQIECBj4foAAAQIECBAgQIBASMDAD5UpCgECBAgQIECAAAED3w8QIECAAAECBAgQCAkY+KEyRSFAgAABAgQIECBg4PsBAgQIECBAgAABAiEBAz9UpigECBAgQIAAAQIEDHw/QIAAAQIECBAgQCAkYOCHyhSFAAECBAgQIECAgIHvBwgQIECAAAECBAiEBAz8UJmiECBAgAABAgQIEDDw/QABAgQIECBAgACBkICBHypTFAIECBAgQIAAAQIGvh8gQIAAAQIECBAgEBIw8ENlikKAAAECBAgQIEDAwPcDBAgQIECAAAECBEICBn6oTFEIECBAgAABAgQIGPh+gAABAgQIECBAgEBIwMAPlSkKAQIECBAgQIAAAQPfDxAgQIAAAQIECBAICRj4oTJFIUCAAAECBAgQIGDg+wECBAgQIECAAAECIQEDP1SmKAQIECBAgAABAgQMfD9AgAABAgQIECBAICRg4IfKFIUAAQIECBAgQICAge8HCBAgQIAAAQIECIQEDPxQmaIQIECAAAECBAgQMPD9AAECBAgQIECAAIGQgIEfKlMUAgQIECBAgAABAga+HyBAgAABAgQIECAQEjDwQ2WKQoAAAQIECBAgQMDA9wMECBAgQIAAAQIEQgIGfqhMUQgQIECAAAECBAgY+H6AAAECBAgQIECAQEjAwA+VKQoBAgQIECBAgAABA98PECBAgAABAgQIEAgJGPihMkUhQIAAAQIECBAgYOD7AQIECBAgQIAAAQIhAQM/VKYoBAgQIECAAAECBAx8P0CAAAECBAgQIEAgJGDgh8oUhQABAgQIECBAgICB7wcIECBAgAABAgQIhAQM/FCZohAgQIAAAQIECBAw8P0AAQIECBAgQIAAgZCAgR8qUxQCBAgQIECAAAECBr4fIECAAAECBAgQIBASMPBDZYpCgAABAgQIECBAwMD3AwQIECBAgAABAgRCAgZ+qExRCBAgQIAAAQIECBj4foAAAQIECBAgQIBASMDAD5UpCgECBAgQIECAAAED3w8QIECAAAECBAgQCAkY+KEyRSFAgAABAgQIECBg4PsBAgQIECBAgAABAiEBAz9UpigECBAgQIAAAQIEDHw/QIAAAQIECBAgQCAkYOCHyhSFAAECBAgQIECAgIHvBwgQIECAAAECBAiEBAz8UJmiECBAgAABAgQIEDDw/QABAgQIECBAgACBkICBHypTFAIECBAgQIAAAQIGvh8gQIAAAQIECBAgEBIw8ENlikKAAAECBAgQIEDAwPcDBAgQIECAAAECBEICBn6oTFEIECBAgAABAgQIGPh+gAABAgQIECBAgEBIwMAPlSkKAQIECBAgQIAAAQPfDxAgQIAAAQIECBAICRj4oTJFIUCAAAECBAgQIGDg+wECBAgQIECAAAECIQEDP1SmKAQIECBAgAABAgQMfD9AgAABAgQIECBAICRg4IfKFIUAAQIECBAgQICAge8HCBAgQIAAAQIECIQEDPxQmaIQIECAAAECBAgQMPD9AAECBAgQIECAAIGQgIEfKlMUAgQIECBAgAABAga+HyBAgAABAgQIECAQEjDwQ2WKQoAAAQIECBAgQMDA9wMECBAgQIAAAQIEQgIGfqhMUQgQIECAAAECBAgY+H6AAAECBAgQIECAQEjAwA+VKQoBAgQIECBAgAABA98PECBAgAABAgQIEAgJGPihMkUhQIAAAQIECBAgYOD7AQIECBAgQIAAAQIhAQM/VKYoBAgQIECAAAECBAx8P0CAAAECBAgQIEAgJGDgh8oUhQABAgQIECBAgICB7wcIECBAgAABAgQIhAQM/FCZohAgQIAAAQIECBB4IRcB3beyK28AAAAASUVORK5CYII=

Uncaught TypeError: Failed to execute 'drawImage' on Vue.js

Uncaught TypeError: Failed to execute 'drawImage' on Vue.js

javascript

base64

canvas

image

vue.js