[解決済み] データURLからキャンバスへの画像描画

質問

エンコードされた画像をCanvasで開くにはどうしたらよいでしょうか？

を使用しています。

var strDataURI = oCanvas.toDataURL(); 

出力はエンコードされたbase64の画像です。この画像をキャンバスに描くにはどうしたらよいでしょうか？

私は strDataURI を使って、画像を作りたいのですが？それは可能ですか？

もしそうでなければ、キャンバスに画像をロードするための解決策は何でしょうか？

どのように解決するのですか？

データURLが与えられると、（ページ上でも純粋にJSでも）画像を作成することができます。 src を設定することで画像を作成できます。例えば

var img = new Image;
img.src = strDataURI;

この drawImage() メソッド を使用すると、画像（またはキャンバス、動画）のすべてまたは一部をキャンバスにコピーすることができます。

こんな風に使うかもしれません。

var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img,0,0); // Or at whatever offset you like
};
img.src = strDataURI;

編集 : 私は以前、このスペースで onload ハンドラを使う必要がないかもしれないと提案しました。の実験的なテストに基づくと この質問 からの実験的なテストに基づいて、そうすることは安全ではありません。上記のシーケンス-画像を作成し、その画像に onload を新しい画像を使用するように設定し を設定した後 を設定します。 src -は、いくつかのブラウザが確実に結果を使用するために必要です。