読者です 読者をやめる 読者になる 読者になる

それマグで!

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

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

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

Base64 大好きです。

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

画像をBase64にしたいな。

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

base64にするには

  1. Image を作成
  2. img srcに Image突っ込んでロードさせる
  3. img がロード完了されるイベント待ち
  4. canvas要素作成
  5. canvasを2dで扱うcontext取り出し
  6. img の中身をCanvasに転送(コピー)
  7. textarea を作成
  8. canvasの中身をBase64にする
  9. 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不便すぎる。AppleScriptSafariをオートパイロットするほうが楽かも。

広告を非表示にする