Base64 PNG数据到HTML5画布

我想将以Base64编码的PNG图像加载到canvas元素。我有这个代码：

<html>
<head>
</head>
<body>
<canvas id="c"></canvas>
<script type="text/javascript">

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

data =  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";

ctx.drawImage(data, 0, 0);

</script>
</body>
</html>

在Chrome 8中，我收到错误消息： Uncaught TypeError: Type error

在Firefox的Firebug中，这是：“对象的类型与与该对象关联的参数的预期类型不兼容”代码：“ 17”

在那个base64中，是我在GIMP中制作的5x5px黑色PNG正方形，并将其转换为GNU / Linux程序base64中的base64。

— 托马斯·内斯罗纳尔（TomášNesrovnal）
source

Answers:

170

从外观上看，您实际上需要将drawImage传递给像这样的图像对象

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

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

<canvas id="c"></canvas>

展开摘要

我已经在chrome中尝试过了，效果很好。

— 杰里夫
source

好的答案，但是您确定每次都能奏效吗？我发现在设置之后立即绘制图像是错误的src，因为您应该使用onload回调函数来确保图像已完成加载。我的测试有50％失败了，因为图片尚未完成加载。

— Scott Rippey 2012年

哇！从过去爆炸：）。你说得很对。如果您在设置图像的src之后立即调用drawImage，则可能会遇到问题，并且根据情况的不同，您很可能希望在尝试渲染之前使用onload来确保图像已真正加载它到画布上。上面的代码仅仅是一个示例，它显示drawImage实际上需要一个图像对象以及如何将其传递给它。

— 杰里夫（Jerryf）2012年

请注意，如果要遍历许多画布，则可能需要将其更改为，以ctx.drawImage(this,0,0);确保image变量引用正确的图像。很好的答案！

— 睡鼠

应在src之前设置onload事件。有时src可以立即加载，并且从不触发onload事件

— Totty.js 2013年

但是，如果data:image/长度很大，我们会得到414 (Request-URI Too Long

— Sarath

杰里夫的答案很好，除了一个缺陷。

应在src之前设置onload事件。有时src可以立即加载，并且从不触发onload事件。

（就像Totty.js指出的那样。）

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

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

— 约翰
source

顺便说一句：我编辑了杰里夫的答案，但是有人拒绝了。不可能是杰里夫（Jerryf），因为他的个人资料说他最后一次登录是2014

— 约翰

“有时src可以立即加载，并且永远不会触发onload事件。” 我觉得这个的发生是非常罕见的，几乎从来没有，但没有理由不使它成为一个习惯设定onload之前src......我使它成为一个习惯这样做。

— markE 2015年

@markE这并不罕见。当浏览器缓存图像时，它会一直发生，例如在重新加载浏览器时。这是在C ++程序的IE引擎中发生的。

— Stefan Rein