JavaScript

[JavaScript] imgタグの画像をBase64形式に変換する

投稿日:2017年10月25日 更新日:

imgタグの画像をBase64形式に変換するサンプルです。

サンプルソース

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

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

解説

  • imgタグの画像をBase64形式に変換するには、一旦canvas要素に変換してからBase64に書き出します。
  • 上記サンプルはローカル環境だと、セキュリティ(クロスドメイン制約)のため実行できません。(※Tainted canvases may not be exportedエラーが発生します。)
    実行したい場合は、レンタルサーバー等にアップしてご確認ください。

スポンサーリンク

スポンサーリンク

-JavaScript
-, ,

執筆者:


  1. pんg より:

    pngでもdata:image/jpeg;になる。

    • とら より:

      コメントありがとうございます。
      toDataURLに指定した型式がBase64文字列の先頭になるようです。
      toDataURLの引数には画像と同じ形式を指定してください。

      サンプルも修正しました。

comment

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

関連記事

[JavaScript] ツールチップを設定する

JavaScriptでツールチップを設定するサンプルです。 サンプルソース 例)ボタンを押すと、入力された値がツールチッ ...

[JavaScript] オブジェクト(連想配列)の生成と読込みを行う

オブジェクト(連想配列)を生成するサンプルと、読込みを行うサンプルです。 オブジェクト(連想配列)の生成 例1)キーと値 ...

[JavaScript] document.writeで出力した文字列にアンカーを設定する

document.writeで出力した文字列にアンカーを設定するサンプルです サンプルソース 例)文字列「備考」にアンカ ...

[JavaScript] 日付文字列(YYYYMMDD)から年度を求める

日付文字列(YYYYMMDD)から年度を求めるサンプルです。 サンプルソース 例)引数に日付文字列(YYYYMMDD)を ...

[JavaScript] 独自例外を生成して投げる

独自例外を生成して投げるサンプルです。 サンプルソース 例)独自例外を生成して投げる [crayon-5d83d8c52 ...

スポンサーリンク