我想将以 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>
在 Chrome 8 中，我收到错误：Uncaught TypeError: Type error
在 Firefox 的 Firebug 中：“对象的类型与与对象关联的参数的预期类型不兼容”代码：“17”
在那个 base64 是我在 GIMP 中制作的 5x5px 黑色 PNG 正方形，并在 GNU/Linux 的程序 base64 中将其转换为 base64。
从外观上看，您实际上需要像这样将 drawImage 传递给图像对象
var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d");变种图像 = 新图像（）； image.onload = function() { ctx.drawImage(image, 0, 0); }; image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";
我已经在 chrome 中尝试过它，它工作正常。
杰里夫的回答很好，除了一个缺陷。
onload 事件应该在 src 之前设置。有时 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";
src 之前...我养成了这样做的习惯。
src后立即绘制图像有问题，因为您应该使用onload回调来确保图像已完成加载。我的 50% 的测试都失败了，因为图像还没有完成加载。ctx.drawImage(this,0,0);，以确保图像变量引用正确的图像。不过答案很好！data:image/长度很大，我们将得到414 (Request-URI Too Long