如何将图像从服务器传递到JavaScript中的功能? [英] How to pass images from server to function in JavaScript?
问题描述
我正在尝试将图像传递给提取元数据的JS函数.所述图像保存在服务器(目前为localhost)的文件夹中.我可以使用该功能来处理来自HTML的文件输入，但不知道如何从服务器中提取图片并将其传递给该功能.
I'm trying to pass images to function in JS that extracts metadata. Said images are kept in folder on server(localhost for now). I got the function to work with file input from HTML but have no idea how to pull the pictures from the server and pass them to the function.
任何想法都值得赞赏.不需要超声波速度.
Any ideas are appreciated. There is no need for ultrasonic speeds.
我所拥有的是:
<!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提出了什么建议，但仅在第二次触发(单击按钮)时有效.
Did what was suggested by PamBlam but it works only every second time triggered (button clicked).
这是代码:
<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.tartget.files [0] ，请将其替换为 Image .您将图像制作成这样:
Wherever you have e.tartget.files[0], replace it with an Image. You make the image like this:
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
So you would replace e.tartget.files[0] with myImage. Then obviously change the url to the file.. ie http://localhost/pics/image.jpg
如果您在间歇性工作时遇到问题，则可能是种族问题.通过在 onload 函数中投入逻辑来解决此问题...
If you're having problems with it working intermittently, you may have a race condition. Solve it by throwing your logic in the onload function...
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...
}
};
这篇关于如何将图像从服务器传递到JavaScript中的功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
