从base 64字符串绘制Canvas图片时出错 [英] Error when drawing Canvas Picture from base 64 String
问题描述
我想将base64字符串绘制到画布bur中,我总是会收到错误
I want to draw a base64 String into a canvas bur I always get the error
TypeError:CanvasRenderingContext2D.drawImage的参数1可能不会转换为以下任何一个:HTMLImageElement,HTMLCanvasElement,HTMLVideoElement。
TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.
我用google搜索了,但是我仍然不知道我在做什么
I did google it, but I still don't know what I did wrong.
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.
推荐答案
drawImage
希望其第一个参数是图像,视频或画布(即 HTMLImageElement
, HTMLVideoElement
或 HTMLCanvasElement
),而不是字符串。
drawImage
expects its first argument to be an image, video, or canvas (i.e., HTMLImageElement
, HTMLVideoElement
, or HTMLCanvasElement
), not a string.
您需要构造一个新图像,然后为该图像对象提供一个新图像base64源。加载图像后,您可以将图像添加到画布中:
You need to construct a new image, and then supply that new image object with your base64 source. Once the image loads, you can add the image to your canvas:
var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUh...";
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
这篇关于从base 64字符串绘制Canvas图片时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!