Base64 大好きです。

どんなデータでもHTMLに埋め込んでしまえるBase64愛してます。

画像をBase64にしたいな。

色々と方法はあるけれど、今回はCanvasでやろうと思いました。

base64にするには

Image を作成
img srcに Image突っ込んでロードさせる
img がロード完了されるイベント待ち
canvas要素作成
canvasを2dで扱うcontext取り出し
img の中身をCanvasに転送（コピー）
textarea を作成
canvasの中身をBase64にする
textareaの中にbase64を書き込み

こんなかんじで、Base64を作ることが出来ます。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    body{


    }
  </style>
  <script type="text/javascript">
  document.addEventListener("DOMContentLoaded",function(){
    img = new Image();
    img.src = "test.png"
    img.addEventListener("load", function(){
      main = document.createElement("canvas")
      document.body.appendChild(main)
      context = main.getContext("2d")
      main.width  = this.naturalWidth;
     main.height = this.naturalHeight;
     main.setAttribute("style","display:none")
      context.drawImage( this ,0 ,0 ,this.naturalWidth,this.naturalHeight, 0 ,0 ,this.naturalWidth,this.naturalHeight)
     node = document.createElement("textarea")
     node.setAttribute("cols",200)
     node.setAttribute("rows",10)
     document.body.appendChild(node)
     node.innerHTML=main.toDataURL()
     node.focus()
     node.select()
    })
  })
  </script>
</head>
<body>
</body>
</html>

ハマりどころ。

画像のロード待ち。

img srcに書いたとしてもロード待ちが必要。面倒なので昔からのnew Image()してsrcに代入して、loadイベントのリスナーを使う。

次に、naturalWidthをCanvasのwidth に突っ込むあたり。

どうも画像コピーが上手くいかないと思ったらcanvasのデフォルトサイズはDOM（CSS側）で設定されるものと、Canvasオブジェクト自体に大きさがあってハマった。

あと、画像の読み出しはSameOriginPolicyとかあるみたい

なんでわざわざこんなことをしているのか。

Capybara-webkitで画像をCAPTCHA取り出したけど、ruby の capybara-webkitはバイナリを変数に取り出して扱えないので、全部”空”文字化されたので、HTML中に（同一URLで毎回変わる）正しく画像がロードされてるかチェックしょうと思うと、一旦保存しなくちゃいけない

その割に、画像を取り出せないので、一旦Base64に変換して保存しようと思ったのでした。（結局あきらめたけど

もっと良い方法もあるんだろうけど、Capybara-webkit面倒くさい・・・

内蔵webkitのキャッシュとか読めないのかなぁ。

PDFのダウンロードもresponse に application/pdf だと、body本文が空文字になる。。PDFの中身をRubyで読みだして、パパっとチェックしたかったんだけど不可能でした。capybara-webkitが作られているqt環境の限界っぽいので諦めました。

Capybara-webkit不便すぎる。AppleScriptでSafariをオートパイロットするほうが楽かも。

それマグで！

知識はカップより、マグでゆっくり頂きます。　takuya_1stのブログ

html5 canvasを用いた画像のBase64作成