Base64 PNG数据到HTML5画布
我想将Base64中编码的PNG图像加载到canvas元素。我有以下代码：Base64 PNG数据到HTML5画布,html,canvas,png,base64,Html,Canvas,Png,Base64,我想将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
<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>
var canvas=document.getElementById（“c”）；
var ctx=canvas.getContext（“2d”）；
data=“data:image/png；base64，IVBorW0KggoaaaAnsuhueugaaauaaaaAfcaaacDbGyaaaaAaAaAaAaAaAaAaAaAcXmbajQCgaaAaAaAaAaAaAaAdDevydenvBw1LbNbNqaQ1jLyXRLzCb3AaAaAaAaDeleQi12NGOC4aAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaEcXaAaAaEcXaAaEaEa；
ctx.drawImage（数据，0,0）；
uncaughttypeerror:Type error其中base64是我在GIMP中制作的5x5px黑色PNG正方形，并在GNU/Linux的程序base64中将其转换为base64。从外观上看，您需要实际向drawImage传递这样的图像对象
var canvas=document.getElementById（“c”）；
var ctx=canvas.getContext（“2d”）；
var image=新图像（）；
image.onload=函数（）{
ctx.drawImage（图像，0,0）；
};
image.src=“数据：image/png；base64，ivborw0kggoaaaansuhueugaaaaaaaafcaaaaacdbgyaaaaaaaaaxnsr0iars4c6qaaalwsflzaaalewaacxmbajqcgaaaad0su1fb9omcruimribqvkaaaazdevydenvbw1lbnqq1jlyxrlzcb3axroiedjtvbxgq4xaaadeleqi12ngoc4aaabaqaee+h1AAAAAElFTkSuQmCC”
杰里夫的回答很好，只是有一个缺陷。
onload事件应在src之前设置。有时src可以
立即加载，切勿触发onload事件
（就像Totty.js指出的那样。）
回答得好，但你确定每次都是这样吗？我发现在设置src
后立即绘制图像有问题，因为您应该使用onload
回调来确保图像已完成加载。我50%的测试都失败了，因为图像还没有完成加载。哇！过去的爆炸：）。你说得很对。如果在设置图像的src之后调用drawImage，则可能会遇到问题，并且根据您的情况，您很可能希望使用onload来确保在尝试将图像渲染到画布之前确实加载了图像。上面的代码更多的是一个示例，说明drawImage实际上需要一个image对象，以及如何将其传递给它以确保图像变量引用正确的图像。回答得很好！onload事件应在src之前设置。有时src可以立即加载，并且从不触发onload事件，但是，如果数据：image/
长度很大，我们将得到414（请求URI太长了）
顺便说一句：我编辑了Jerryf的答案，但有人拒绝了。不可能是Jerryf，因为他的个人资料说他上一次登录是在2014年。“有时src可以立即加载，而不会触发onload事件。"我认为这种情况的发生几乎是罕见的，但在代码< >代码> SRC 之前，没有理由不让它设置<代码> OnLoad …我养成这样的习惯。@ MaKe并不罕见。当浏览器缓存图像时，它总是会发生，例如浏览器重新加载。这发生在C++中的IE引擎中。节目。
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";