BinaryDevelop
  1. ホーム
  2. html

[解決済み] Base64 PNG データを HTML5 canvas に変換する

2022-11-26 16:52:30

質問

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" です。

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で試しましたが、問題なく動作しています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します