Html Base64 PNG 数据到 HTML5 画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4409445/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Base64 PNG data to HTML5 canvas
提问by Tomá? Nesrovnal
I want to load a PNG image encoded in Base64 to canvas element. I have this code:
我想将 Base64 编码的 PNG 图像加载到画布元素。我有这个代码：
<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>
In Chrome 8 I get the error: Uncaught TypeError: Type error
在 Chrome 8 中，我收到错误消息： Uncaught TypeError: Type error
And in Firefox's Firebug this: "The type of an object is incompatible with the expected type of the parameter associated to the object" code: "17"
在 Firefox 的 Firebug 中：“对象的类型与与该对象关联的参数的预期类型不兼容”代码：“17”
In that base64 is 5x5px black PNG square that I have made in GIMP and turn it to base64 in GNU/Linux's program base64.
在那个 base64 中是我在 GIMP 中制作的 5x5px 黑色 PNG 正方形，并在 GNU/Linux 的程序 base64 中将其转换为 base64。
回答by Jerryf
By the looks of it you need to actually pass drawImage an image object like so
从它的外观来看，您实际上需要像这样传递 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>I've tried it in chrome and it works fine.
我已经在 chrome 中试过了，效果很好。
回答by John
Jerryf's answer is fine, except for one flaw.
Jerryf 的回答很好，除了一个缺陷。
The onload event should be set before the src. Sometimes the src can be loaded instantly and never fire the onload event.
onload 事件应该在 src 之前设置。有时 src 可以立即加载并且永远不会触发 onload 事件。
(Like Totty.js pointed out.)
（就像 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";
