我想在画布中绘制一个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);
}
此解决方案是最好的
- 方法:FileReader获取
https://stackoverflow.com/a/20285053/296373