メタデータを抽出するJS内で機能するように画像を渡そうとしています。上記の画像はサーバ上のフォルダに保存されます(現在はlocalhost)。私はHTMLからのファイル入力を処理する機能を持っていますが、サーバから写真を引き出して関数に渡す方法は知られていません。サーバーから画像をJavaScriptに渡すには?
アイデアをいただければ幸いです。超音波速度は必要ありません。
私は何を持っていることは次のとおりです。
<!doctype html>
<html>
<head>
<script type="text/javascript" src="exif.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
</head>
<body>
Upload a local file to read Exif data.
<br/>
<input id="file-input" type="file"/>
<br/>
<script>
document.getElementById("file-input").onchange = function (e) {
EXIF.getData(e.target.files[0], function() {
let lat = EXIF.getTag(this, 'GPSLatitude');
let long = EXIF.getTag(this, 'GPSLongitude');
let alt = EXIF.getTag(this, 'GPSAltitude');
let toDecimalLat = lat[0].numerator + lat[1].numerator/
(60 * lat[1].denominator) + lat[2].numerator/(3600 * lat[2].denominator);
let toDecimalLong = long[0].numerator + long[1].numerator/
(60 * long[1].denominator) + long[2].numerator/(3600 * long[2].denominator);
let toDecimalAlt = alt.numerator/alt.denominator;
console.log(toDecimalLat);
console.log(toDecimalLong);
console.log(toDecimalAlt);
console.log(e.target.files[0]);
});
}
</script>
</body>
</html>
はPamBlamによって提案されたものでしたが、それは唯一の毎秒時間は(ボタンをクリック)トリガ動作します。
これはコードです:
<body>
Upload a local file to read Exif data.
<br/>
<button id="target">Click</button>
<br/>
<script>
$("#target").click(function() {
console.log("button clicked");
var myImage = new Image();
myImage.src = 'pictures/pic.jpg';
EXIF.getData(myImage, function() {
let lat = EXIF.getTag(this, 'GPSLatitude');
let long = EXIF.getTag(this, 'GPSLongitude');
let alt = EXIF.getTag(this, 'GPSAltitude');
let toDecimalLat = lat[0].numerator + lat[1].numerator/
(60 * lat[1].denominator) + lat[2].numerator/(3600 * lat[2].denominator);
let toDecimalLong = long[0].numerator + long[1].numerator/
(60 * long[1].denominator) + long[2].numerator/(3600 * long[2].denominator);
let toDecimalAlt = alt.numerator/alt.denominator;
console.log(toDecimalLat);
console.log(toDecimalLong);
console.log(toDecimalAlt);
console.log(this);
});
});
</script>
</body>
サーバーを、それを解決するのではなく、ブラウザがサーバから画像を「引っ張ります」。ファイルが 'サーバー'上にある場合、なぜファイル入力フィールドを使用していますか?あなたはそれをサーバーから取り出し、ファイル入力フィールドはローカルマシンからブラウザに画像をアップロードするために使用されます。それはあなたがやろうとしていることですか? –
関連するコードのようなサウンドは、それを送信しているコードであり、受信していません...とにかく、クライアントマシン上のファイルと関係があるファイル入力からファイルを引っ張っているように見える 'e.target'は、しかし、サーバーからの画像ではありません...しかし、この情報はPHPや他のサーバー側の言語から簡単に取得できます。 –
いいえ、サーバーからイメージを取得しようとしています。私はAJAXで試しましたが、成功しなかったでしょう、おそらく何か間違っていました。 –