Canvas.toDataURL() - キャンパスをデータURIに変換する
「描画」のボタンを押すと、左側のキャンパスに適当な図形を描画します。次に「toDataURI()」のボタンを押すと、キャンパスの内容をデータURIに変換して、右側のimg要素のsrc属性に指定します。表示された画像はブラウザで保存することができます。JPEG、webpは仕様上、透過部分が黒くなります。webpはChrome以外ではサポートされていないため、デフォルトのPNGに変換されます。 <div id="parent"> <div><canvas id="target"></canvas></div> <div><img id="output" src=""></div> </div> <p><a id="method1">描画</a></p> <p><a id="method2">toDataURI()</a></p> <p><a id="method3">toDataURI( "i
[JavaScript] Base64形式の画像データをcanvasに表示する – コピペで使える JavaScript逆引きリファレンス
Base64形式の画像データをcanvasに表示するサンプルです。 サンプルソース 例）Base64文字列をcanvasにセットする <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script> var data = "data:image/jpeg;base64,/9j/4AAQS..."; //Base64データ（省略しています） function setBase64(){ //2Dコンテキストのオブジェクトを生成する var cvs = document.getElementById('cvs1'); var ctx= cvs.getContext('2d'); //画像オブジェクトを生成 var img = new Image(); img.src = data
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 の canvas 要素を base64 文字列化し画像として保存する方法まとめ - Qiita
