从base 64 String绘制Canvas图片时出错

Question

我想绘制一个base64字符串到画布bur我总是得到错误

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);

这是一个小提琴.

Answer 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);
}