Base64PNGデータから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>

Chrome 8では、次のエラーが発生します。 Uncaught TypeError: Type error

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

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

— トマシュネスロヴナル
ソース

回答:

170

見た目では、実際に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>

スニペットを展開

私はそれをクロムで試しました、そしてそれはうまく働きます。

— ジェリーフ
ソース

良い答えですが、これは毎回機能しますか？コールバックを使用して画像の読み込みが完了したことを確認するsrcことになっているため、を設定した直後に画像を描画するのはバグがあることがわかりましたonload。画像の読み込みが完了していなかったため、テストの50％が失敗しました。

— スコットリッペイ2012

うわー！過去からの爆発:)。あなたはかなり正しいです。画像のsrcを設定した直後にdrawImageを呼び出すと、問題が発生する可能性があります。状況によっては、レンダリングを試みる前に、onloadを使用して画像が実際に読み込まれていることを確認することをお勧めします。キャンバスにそれ。上記のコードは、drawImageが実際に画像オブジェクトを必要とし、それを渡す方法を示す単なる例です。

— ジェリーフ2012

注意として、複数のキャンバスをループしてctx.drawImage(this,0,0);いる場合は、画像変数が正しい画像を参照するように変更することをお勧めします。でも素晴らしい答えです！

— ヤマネ2012年

onloadイベントは、srcの前に設定する必要があります。srcが即座にロードされ、onloadイベントが発生しない場合があります

— Totty.js 2013年

しかし、data:image/長さが大きい場合は、次のようになります414 (Request-URI Too Long

— Sarath 2016

ジェリーフの答えは、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";

— ジョン
ソース

ところで：私はジェリーフの答えを編集しましたが、誰かがそれを拒否しました。彼のプロフィールによると、彼は2014年に最後にログインしたとのことなので、ジェリーフであるはずがありません。–

— ジョン

「srcを即座にロードして、onloadイベントを発生させない場合があります。」 これが発生することはほとんどないことは非常にまれだと思いますが、onload前に設定する習慣をつけない理由はありませんsrc...私はそうする習慣をつけています。

— markE 2015

@markEそれは珍しいことではありません。これは、ブラウザのリロードなど、ブラウザが画像をキャッシュするときに常に発生します。これは、C ++プログラムのIEエンジンで発生しました。

— Stefan Rein 2018