から画像を保存できるかどうか疑問に思っていました
<input type="file" id="image">
ローカル。画像を保存する必要がありますか、それとも単に画像の場所を保存できますか?
コンテキストについては、入力フォームから名前、住所などを取得し、オブジェクトを作成し、それを配列に格納して表示するフォームからのものです。
から画像を保存できるかどうか疑問に思っていました
<input type="file" id="image">
ローカル。画像を保存する必要がありますか、それとも単に画像の場所を保存できますか?
コンテキストについては、入力フォームから名前、住所などを取得し、オブジェクトを作成し、それを配列に格納して表示するフォームからのものです。
ここでの他の回答とは対照的に、最新のブラウザーを使用している場合は、を<input>
使用してファイルの内容についてかなりの量を取得および保存できます。ブラウザーに再度保存するように指示することもできます (デフォルトのダウンロード動作) 。elm.files
FileReader
window.localStorage
これを実行しても、ノードにを設定できるわけではないことに注意してください。.value
<input>
ファイルが選択されていると仮定した場合の実行例を次に示します。
// From <input> node
var elm = document.getElementById('image'),
img = elm.files[0],
fileName = img.name, // not path
fileSize = img.size; // bytes
// By Parsing File
var reader = new FileReader(),
binary, base64;
reader.addEventListener('loadend', function () {
binary = reader.result; // binary data (stored as string), unsafe for most actions
base64 = btoa(binary); // base64 data, safer but takes up more memory
}, false);
reader.readAsBinaryString(img);
ここから、 に保存したり、 dataURIlocalStorage
を作成したりできます。たとえば、画像が.jpgであることがわかっている場合、のsrcを に設定することで表示できます。fileName
<img>
"data:image/jpeg;base64," + base64
このデータを変更しても、選択した元のファイルには影響しないことに注意してください。
とんでもない。しかし、それができれば、深刻なセキュリティ上の問題が発生します。
ファイル入力の値を取得しようとすると、次のようになります。
document.getElementById('image').value
値は「C:\fakepath\somefile.txt」になります
いいえ。ローカル OS でファイルを保存したり、ファイルにアクセスしたりすると、ブラウザの権限に違反するためです。そのため、コンテンツがサーバーにアップロードされていない限り、スクリプトはコンテンツにアクセスできません。また、ブラウザによって、選択されたファイルのパスが異なる方法で処理されます。そのため、そこで多くの問題に遭遇します。
とはいえ、これを回避する方法がいくつかありますが、ここでは説明しません。簡単に言えば、画像は何らかの方法でサーバーにアップロードする必要があり、スクリプトはアップロード先のパスからパスまたは画像自体を参照できます。
ファイル名を取得したい場合、または画像を表示したい場合は、ファイル APIを使用して行うことができます(それをサポートするブラウザーで)。セキュリティ上の理由から、このパスは使用できません。