web-dev-qa-db-ja.com

Base64 PNGデータからHTML5キャンバスへ

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>

In Chrome 8エラーが表示されます：Uncaught TypeError: Type error

また、FirefoxのFirebugでは、「オブジェクトのタイプは、オブジェクトに関連付けられているパラメーターの予想されるタイプと互換性がありません」コード：「17」

そのbase64には、GIMPで作成した5x5pxの黒いPNG正方形があり、GNU/Linuxのプログラムbase64ではbase64に変換されます。

html5canvaspngbase64
71
Tomáš Nesrovnal

その見た目では、実際に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で試してみましたが、うまくいきます。

144
Jerryf

Jerryfの答えは、1つの欠陥を除いて問題ありません。

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";
11
John