Javascriptで画像をBase64エンコードする

こんばんは。きわさです。

HTMLにはcanvasというタグがあります。
canvasには、描画しているデータをDataURLに変換するメソッドがあるのでこれを使いたいと思います。

// 変換したい画像を表示しているimgタグを取得
var img = document.getElementById("image")

// canvasタグを生成し、画像のサイズにあわせる
var c = document.createElement("canvas");
c.width = img.width;
c.height = img.height;

// canvasに画像を描画
var cx = c.getContext("2d");
cx.drawImage(img,0,0);

// 変換したテキストをコンソールに表示
console.log(c.toDataURL());

流れとしては、
画像を読み込み、canvasに描画、データURLに変換となっています。

以下はサンプルです。
選択した画像をデータURLに変換します。
クライアント処理なので画像はアップロードされません。