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

Here's a fiddle.

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

Answer 2

此解决方案最好

方法：提取FileReader

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

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

2 个答案: