画像データをブラウザのJavaScriptでbase64エンコードする術

こんにちは。おなかが空きました、きたけーです。

ブラウザのJavaScriptで画像データをbase64エンコードする方法を調べてみました。(すんません、コードはCoffeeScriptです)

Canvas

Canvasを使う方法。こんなかんじ

window.onload = ->
  source = $('#source')[0]
  image = new Image()
  image.src = source.src

  canvas = document.createElement('canvas')
  canvas.width = image.width
  canvas.height = image.height
  context = canvas.getContext('2d')
  context.drawImage(source, 0, 0)
  $('#destination').attr("src", canvas.toDataURL('image/jpeg'))

#sourceと#destinationはimg要素。 canvas contextのdrawImage関数で画像を描画、toDataURL関数で得られたURLにbase64エンコードされたデータが含まれている。注意しないといけないのは、「canvasで表示している内容」がデータになるので、canvasの幅は元々の画像の幅にしておく必要があること。元画像の縦横サイズを調べるためにImageオブジェクトを生成している(既に画像が読み込み済みなのでImageオブジェクトのonloadイベントハンドラは使わない)。

File API

File APIを使う方法。こんなかんじ

$(->
  $('input[type="file"]').on 'change', () ->
    if @files.length <= 0
      return
    file = @files[0]
    reader = new FileReader()
    reader.onload = (e) ->
      $('#destination').attr("src", e.target.result)
    
    reader.readAsDataURL(file)
)

FileReaderオブジェクトのreadAsDataURL関数で得られたURLにbase64エンコードされたデータが含まれている。

これ以外

これ以外に方法あるのかなぁ