サーバーから画像をJavaScriptに渡すには？

メタデータを抽出する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>

出典

2016-08-05 Biser Atanasov

サーバーを、それを解決するのではなく、ブラウザがサーバから画像を「引っ張ります」。ファイルが 'サーバー'上にある場合、なぜファイル入力フィールドを使用していますか？あなたはそれをサーバーから取り出し、ファイル入力フィールドはローカルマシンからブラウザに画像をアップロードするために使用されます。それはあなたがやろうとしていることですか？ –

関連するコードのようなサウンドは、それを送信しているコードであり、受信していません...とにかく、クライアントマシン上のファイルと関係があるファイル入力からファイルを引っ張っているように見える 'e.target'は、しかし、サーバーからの画像ではありません...しかし、この情報はPHPや他のサーバー側の言語から簡単に取得できます。 –

いいえ、サーバーからイメージを取得しようとしています。私はAJAXで試しましたが、成功しなかったでしょう、おそらく何か間違っていました。 –

あなたはe.tartget.files[0]を持ってどこ、Imageと交換してください。あなたは、このような画像を作る：

var myImage = new Image(); 
myImage.src = 'https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png';

ですから、myImageでe.tartget.files[0]を置き換えます。そして、明らかにあなたが断続的に働いて、それに問題を抱えている場合、あなたは競合状態を有していてもよく、すなわちhttp://localhost/pics/image.jpg

...ファイルへのURLを変更します。ブラウザには、何も「合格」しません... onload機能であなたのロジックを投げることによって

var myImage = new Image(); 
myImage.src = 'https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png'; 
myImage.onload = function(){ 
    EXIF.getData(myImage, function(){ 
     // exif stuff here... 
    } 
};

出典

2016-08-05 12:56:22

それはまったく私が探していたものでした。どうもありがとうございます！ –

@BiserAtanasov - 問題が解決した場合は、答えによってチェックマークを押してください。 –

問題を解決しました。ありがとうございました！メインポストにいくつかの小さな問題を追加しました。 –

サーバーから画像をJavaScriptに渡すには？

答えて

関連する問題