根据64字符串绘制画布图片时出错

Error when drawing Canvas Picture from base 64 String

本文关键字：布图片 出错 绘制 字符串 根据      更新时间：2023-09-28

我想在画布中绘制一个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);

这是一把小提琴。

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

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

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

此解决方案是最好的

  1. 方法：FileReader获取

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

相关文章：