imageタグの画像データを取得するには？

質問

現在とある理由から、imageタグで取得した画像データをBase64エンコードしようとしています。

しかしながら、imageタグのどのプロパティにアクセスすれば画像データそのもの(srcに格納されているurlではなく)が取得できるかわかりません。

どうすればよいのでしょうか？

回答No.4

神崎 渉瑠（@taloo） · ベストアンサー

バイナリデータの場合は、特定のバイトコードのみ欠損するらしいです。
全部のデータが消えるわけではなかったので、普通に取得できるのかと思ってました。
すみません。

なんか、うまくいったっぽいです。
http://home.wi-wi.jp/lab/00t/
でもたぶん、対処療法だと思います。

req.responseType = "blob";
として、req.responseから取得するのが、たぶん今後の標準になると思いますが、
Safari5.1、Opera11、Chrome17、Fx10で取得できませんでした。
https://developer.mozilla.org/en/XMLHttpRequest

お礼

色々ご丁寧にありがとうございます。

ただ結論からいうと自主解決しました。
具体的な方法としては、javascript内部でサーバからgetでデータを引っ張ってきただけです。一連の流れとしては
http://lain003.blog51.fc2.com/blog-entry-49.html
こんな感じです。

<<sessinoStorageとブラウザのキャッシュ
この件ですが、sessionStorageは5MB保存できるみたいですが、キャッシュのほうは体感ですが1MBぐらい（画像４枚分程）しか保存できていないようです。
まああと、HTML5を使ってみたかっただけというのもあります。

<<canvas
そのような方法があったんですね。これだといちいちbase64エンコードのメソッドをかかなくて便利そうですね。

ご回答ありがとうございました。

回答No.3

神崎 渉瑠（@taloo）

No.2です。
BBS投稿欄に直接書いたのでところどころ間違ってますが、すみません、適宜調整してください。

XHRを使ってAudioファイルをローカルストレージに保存できないかと作ってみました。
http://home.wi-wi.jp/lab/00s/

結果的に失敗したようですが、
比較用に画像ファイルを保存してみると、どうやらcanvasで取得した物とXHRで取得した物でエンコード結果が違うので、
単純にXHRで取得して保存して終わりというわけにはいかないようです。

ご参考まで。

回答No.2

神崎 渉瑠（@taloo）

canvasにdrawImage()で描画して、toDataURL()で取り出せばBASE64エンコードしたデータを取得できます。

var img=document.getElementsByTagName('img')[0];
var canvas=document.createElement('canvas');
canvas.width=img.width; canvas.height=img.height;
canvas.getContenxt('2d').drawImage(img);

var imageData=canvas.toDataURL('image/png');

alert(imageData);//BASE64エンコード済み

var newImage=new Image();
newImage.src=imageData;

document.body.appendChild(newImage);

canvas未対応ブラウザや、
raw data（バイナリデータ）を取りたい場合はそのままでは無理ですが、
XHR（またはactiveXObject）を使ってimage.srcにアクセスし、responseTextを取得すれば取り出せます。
（文法上はresponseTextはDOMStringということになっていますが、バイナリデータでも問題ないようです。）

ローカル対応のウェブアプリでなければ、
image.srcを保存するだけにして、描画する際は、画像本体を随時ネットからダウンロードしてきても良いのではないでしょうか？
（sessionStorageはブラウザを閉じればデータが消えます。
その時間であればブラウザキャッシュとして残っているので、「img.src=http://ストレージに保存したURL」で十分高速な読み込みができるのではないでしょうか。）

回答No.1

ORUKA1951

主語と状況がわかりません。
誰がですが、
　もし、そのページを開いてみているユーザーでしたら、その画像をいったん保存してPerlなりを使ってでコードすることになるでしょう。なぜなら、HTMLに埋め込まれたデータは、ブラウザが必要と判断して、改めてサーバーに対して要求して得られるものだからです。
　言い換えれば、HTMLを解析して、必要な画像のURLを判断し、それをそのデータの存在するサーバーに対してHTTPプロトコルで要求し取得してこなければなりません。SRCに書かれているURL以外に手に入れようがないからです。それを自動的にしたければ、ブラウザのアドオンでも作成してブラウザにさせるしかない。

　これをサーバーサイドでしたい場合も同じで、サーバーでソケット通信が許可されていれば、この動作をさせることになります。

補足

申し訳ありません。少し説明不足がすぎました。

自分のやりたいことは、クライアント（ここでいうブラウザ？）がhtmlを解析して得たURLを元にhttpプロトコルを利用し取得した画像データを、HTML5から提供されるsessionStorageを使ってブラウザにデータを保存さしたいのです(Base64エンコードをするのはそのためです)。

ただここで問題となるのがどうやって保存対象の画像データ(ブラウザがimgタグを解析し取得した画像データ)にアクセスするかです。

また何かお気づきの点、説明不足の点がございましたらお返事いただけると幸いです。