No.4ベストアンサー
- 回答日時:
バイナリデータの場合は、特定のバイトコードのみ欠損するらしいです。
全部のデータが消えるわけではなかったので、普通に取得できるのかと思ってました。
すみません。
なんか、うまくいったっぽいです。
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ぐらい(画像4枚分程)しか保存できていないようです。
まああと、HTML5を使ってみたかっただけというのもあります。
<<canvas
そのような方法があったんですね。これだといちいちbase64エンコードのメソッドをかかなくて便利そうですね。
ご回答ありがとうございました。
No.3
- 回答日時:
No.2です。
BBS投稿欄に直接書いたのでところどころ間違ってますが、すみません、適宜調整してください。
XHRを使ってAudioファイルをローカルストレージに保存できないかと作ってみました。
http://home.wi-wi.jp/lab/00s/
結果的に失敗したようですが、
比較用に画像ファイルを保存してみると、どうやらcanvasで取得した物とXHRで取得した物でエンコード結果が違うので、
単純にXHRで取得して保存して終わりというわけにはいかないようです。
ご参考まで。
No.2
- 回答日時:
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
- 回答日時:
主語と状況がわかりません。
誰がですが、
もし、そのページを開いてみているユーザーでしたら、その画像をいったん保存してPerlなりを使ってでコードすることになるでしょう。なぜなら、HTMLに埋め込まれたデータは、ブラウザが必要と判断して、改めてサーバーに対して要求して得られるものだからです。
言い換えれば、HTMLを解析して、必要な画像のURLを判断し、それをそのデータの存在するサーバーに対してHTTPプロトコルで要求し取得してこなければなりません。SRCに書かれているURL以外に手に入れようがないからです。それを自動的にしたければ、ブラウザのアドオンでも作成してブラウザにさせるしかない。
これをサーバーサイドでしたい場合も同じで、サーバーでソケット通信が許可されていれば、この動作をさせることになります。
この回答への補足
申し訳ありません。少し説明不足がすぎました。
自分のやりたいことは、クライアント(ここでいうブラウザ?)がhtmlを解析して得たURLを元にhttpプロトコルを利用し取得した画像データを、HTML5から提供されるsessionStorageを使ってブラウザにデータを保存さしたいのです(Base64エンコードをするのはそのためです)。
ただここで問題となるのがどうやって保存対象の画像データ(ブラウザがimgタグを解析し取得した画像データ)にアクセスするかです。
また何かお気づきの点、説明不足の点がございましたらお返事いただけると幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- PHP 掲示板を資料を参考にして開発中ですが、画像がアップされません? 1 2022/11/21 06:44
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP 'member_picture/'に/がありますが 、「スラッシュ」は必要でしょうか? 1 2022/11/27 04:32
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- PHP PHPで入力フォームでデータを確認表示画面まで送る流れを日本語で理解したいのです。 1 2023/05/29 19:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?↑
-
テーブルの行を折りたたみたい...
-
htmlの文字が縦書きになる
-
HTML入門でもう躓いてしまった。
-
アコーディオンメニューが思う...
-
goo は、放置?
-
パソコンのマイク機能
-
HTMLタグのあるCSVファイルを利...
-
WEBページを強制的に横画面で見...
-
Duolingo のソースコードの名前...
-
、URL化させるにはどうしたらい...
-
CSSについて教えてください。 ...
-
HTMLで画像をポップアップで表...
-
HTMLです 画像のように表せます...
-
12月のカレンダーを表すHTMLを...
-
css初心者 フレックスボックス...
-
HTML電卓で1文字消す方法
-
CSSのホバーエフェクト
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLでDBからデータを表形式で...
-
saved from url=(0013)abou
-
リンクを押すとEXEファイルを実...
-
ローカル用HTMLファイルの安全...
-
ソースのリンク先などの暗号化...
-
ローカルでのhtmlチェックにつ...
-
制作したサイトが文字化けして...
-
ブラウザ(IE)からEXEファイル...
-
subversionでコミットしたらftp...
-
F5などで更新すると、画像やCSS...
-
ローカルファイル(mp3)の再生
-
NetBeansのFTP機能について
-
HTMLファイル内にformの記述を...
-
htmlからhtaへのリンク
-
imageタグの画像データを取得す...
-
Flickity で画像にリンクを貼る...
-
ローカルにあるhtmlをブラウザ...
-
サーバー側でのサイト表示がお...
-
アップロードするとレイアウト...
-
HTMLファイルにテキストファイ...
おすすめ情報