[解決済み] 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で試しましたが、問題なく動作しています。
関連
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] 再描画のためにキャンバスをクリアする方法
-
[解決済み] base64文字列をエンコード、デコードするにはどうしたらいいですか?
-
[解決済み] HTML5/Canvas/JavaScriptを使用してブラウザ内のスクリーンショットを撮影する
-
[解決済み] HTMLでBase64画像を表示する方法
-
[解決済み] HTML Canvas を gif/jpg/png/pdf としてキャプチャしますか?
-
[解決済み] バイナリデータをJSON文字列で。Base64より優れたもの
-
[解決済み】Node.jsでBase64エンコードを行うにはどうすればよいですか?
-
[解決済み】JavaScriptで文字列をBase64にエンコードするにはどうすればいいですか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] メモ帳++でXML/HTMLを自動整形/インデントする方法
-
[解決済み] CSS背景のストレッチとスケール