绘制时出错 Canvas Picture from base 64 String

Question

我想将 base64 字符串绘制成 canvas 但我总是得到错误

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.

我做到了google，但我仍然不知道我做错了什么。

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.

Answer 1

drawImage 期望其第一个参数是图像、视频或 canvas（即 HTMLImageElement、HTMLVideoElement 或 HTMLCanvasElement），不是字符串。

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

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

Answer 2

这个解决方案是最好的

方法：FileReader 获取

绘制时出错 Canvas Picture from base 64 String

Error when drawing Canvas Picture from base 64 String

javascript

canvas