如何从服务器传递图像以在 JavaScript 中运行？

Question

我正在尝试传递图像以在提取元数据的 JS 中运行。所述图像保存在服务器上的文件夹中（目前为本地主机）。我获得了处理来自 HTML 的文件输入的功能，但不知道如何从服务器中提取图片并将它们传递给该功能。

欢迎提出任何想法。不需要超声波速度。

我有的是：

<!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>

Answer 1

无论哪里有 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...
    }
};

如何从服务器传递图像以在 JavaScript 中运行？

How to pass images from server to function in JavaScript?

javascript

image

file

photos

server