gpt4 book ai didi

html - Base64 PNG 数据到 HTML5 Canvas

转载 作者:技术小花猫 更新时间:2023-10-29 11:30:59 26 4
gpt4 key购买 nike

我想将以 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。

最佳答案

从外观上看,您实际上需要像这样向 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 中试过了,效果很好。

关于html - Base64 PNG 数据到 HTML5 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4409445/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com