web-dev-qa-db-ja.com

FileReader APIを使用してURLから画像ファイルをアップロードする方法

HTMLフォームには、ファイルをアップロードするための画像フィールドがあります。私は http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api からチュートリアルを実行しましたが、ローカルディスクから画像ファイルをアップロードするときにうまく機能します。

しかし、画像のURLがあるとします http://www.google.com/images/logos/ps_logo2.png ローカルディスクからアップロードするのではなく、リモートURLからこの画像をアップロードしたいとします。

FileReader AP​​Iは、ローカルディスクから画像をアップロードしようとするときにうまく機能しますが、URLを使用して画像をロードするにはどうすればよいですか？

base64の画像を簡単に作成し、画像フィールドで<img src='data:image/png;base64,iAks4ds__base64__string' id='user_img'>と設定してプレビューに使用するのは簡単ですが、jQueryまたはJavaScriptを使用してリモートURLから画像をアップロードするには、どのワークフローを採​​用する必要がありますか？

どうやって？助言がありますか？

javascriptjqueryhtmlfilereader
13
uday.blob

FileReader AP​​Iはローカルファイル専用です（cf http://www.html5rocks.com/en/tutorials/ file/dndfiles / ）

リモートURLから画像をダウンロードし、そのデータをJavaScriptで抽出する場合は、Image要素とCanvas要素を使用できます。次の質問で説明します。 画像をJavaScriptのバイナリデータ

2
sdabet

@ fiddler 回答によると、fileReaderはローカルファイル専用であり、リモートURLから画像などを取得する必要がある場合は、別のアプローチに従うことができます

1） Http Getリクエストを使用
2） キャンバス機能を使用

しかし、セキュリティ上の脅威により、ブラウザはスクリプトがOriginのクロスリクエストを実行することを許可していません。それを行うことができるのはDOM自体だけです。それは解決することができます

1）Cors（クロスオリジンリソースシェアリング） ？
2）Jsonp ？

今あなたはそう興味があります corsまたはjsonp

リモートのものが存在するサーバーにアクセスできる場合は、サーバー側のコア ？ を実行できます。

しかし、リモートリソースを処理できるソリューションを探す質問として、corsプロキシ ？ が役立ちます
無料のCORプロキシ

1
Praveen Soni