JavaScript

[JavaScript] canvasの画像をBase64形式に変換する

投稿日:2017年11月4日 更新日:

canvasの画像をBase64形式に変換するには、.toDataURL()を使用します。

サンプルソース

例)canvasのデータをjpeg形式としてBase64化する

(inu.png)

(結果例)
data:image/jpeg;base64,/9j/4AAQS...

解説

  • 上記サンプルはローカル環境だと、セキュリティ(クロスドメイン制約)のため実行できません。
    ※Tainted canvases may not be exportedエラーが発生します。
  • 動作確認したい場合は、レンタルサーバ等にアップしてご確認ください。
  • toDataURLの引数には、イメージのタイプを指定します。
    例)"image/png"、"image/jpeg"等。 未指定時は"image/png"とみなされる。

スポンサーリンク

スポンサーリンク

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] ブラウザにインストールされているプラグインの情報を取得する

ブラウザにインストールされているプラグインの情報を取得するには、navigator.pluginsを参照します。 サンプ ...

[JavaScript] 配列内の要素を範囲指定で取り出す

配列内の要素を範囲指定で取り出すには、sliceメソッドを使用すると簡単に取り出せます。 サンプルソース 例)配列内の要 ...

[JavaScript] CSSセレクタ指定で要素を取得する(.querySelector/.querySelectorAll)

CSSセレクタ指定で要素を取得するには、.querySelector()/.querySelectorAll()を使用し ...

[JavaScript] 配列の要素を更新する

配列の要素を更新するサンプルです。 配列の要素を更新するサンプル 配列の要素を更新するには、配列番号で取得した要素に値を ...

[JavaScript] セレクトボックスの選択を位置付ける

セレクトボックスの選択を位置付けるサンプルです。 インデックス番号で位置付ける方法と、value値で位置付ける方法の2種 ...

スポンサーリンク