Как передать изображения с сервера на работу в 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';

Таким образом, вы бы заменить e.tartget.files[0] с myImage. Тогда, очевидно, изменить URL на файл .. т.е. http://localhost/pics/image.jpg

Если у вас возникли проблемы с его работать с перерывами, вы можете иметь состояние гонки. Решить ее, бросив свою логику в функции 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?

ответ

Смежные вопросы