从 base 64 字符串绘制画布图片时出错答案

【问题标题】：Error when drawing Canvas Picture from base 64 String从 base 64 字符串绘制画布图片时出错
【发布时间】：2020-02-13 21:36:53
【问题描述】：

我想在画布上画一个 base64 字符串，但总是报错

TypeError：CanvasRenderingContext2D.drawImage 的参数 1 无法转换为以下任何一种：HTMLImageElement、HTMLCanvasElement、HTMLVideoElement。

我谷歌了，但我仍然不知道我做错了什么。

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var data =  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";
ctx.drawImage(data, 0, 0);

Here's a fiddle.

【问题讨论】：

标签： javascript canvas

【解决方案1】：

drawImage 期望它的第一个参数是图像、视频或画布（即 HTMLImageElement、HTMLVideoElement 或 HTMLCanvasElement），而不是字符串。

您需要构建一个新图像，然后为该新图像对象提供您的 base64 源。图像加载后，您可以将图像添加到画布：

var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUh...";
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}

【讨论】：

【解决方案2】：

这个解决方案最好

方法：FileReader 获取

https://stackoverflow.com/a/20285053/296373

【讨论】：