Base64 PNG 数据到 HTML5 画布 [英] Base64 PNG data to HTML5 canvas

查看：15 发布时间：2021/12/21 8:10:19 html canvas png base64

本文介绍了Base64 PNG 数据到 HTML5 画布的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想将 Base64 编码的 PNG 图像加载到画布元素.我有这个代码:

<头><身体><canvas id="c"></canvas><script type="text/javascript">var canvas = document.getElementById("c");var ctx = canvas.getContext("2d");数据= 数据:图像/PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE + h1AAAAAElFTkSuQmCC";ctx.drawImage(data, 0, 0);

在 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 = 函数(){ctx.drawImage(image, 0, 0);};image.src = 数据:图像/PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE + h1AAAAAElFTkSuQmCC";

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

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

I want to load a PNG image encoded in Base64 to canvas element. I have this code:

<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



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"

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.
 解决方案 
By the looks of it you need to actually pass drawImage an image object like so



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.

                        这篇关于Base64 PNG 数据到 HTML5 画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

Base64 PNG 数据到 HTML5 画布 [英] Base64 PNG data to HTML5 canvas

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

Base64 PNG 数据到 HTML5 画布 [英] Base64 PNG data to HTML5 canvas

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭