Question

我有javascript代码，可以从地理标记图像中检索GPS坐标。我使用document.GetElementByID将引用加载到HTML图像对象（我的理解）。然后它将该引用传递给我的自定义代码，然后从图像中检索GPS坐标。这一切都很美妙。

我想要消除HTML图像div和ID，只需使用纯粹的javascript将我的函数发送到SAME类型的引用，而不使用document.GetElementById。

基本上，我想从此转换：

var myimage = document.getElementById("img1");  //img1 

getLocation(myimage, function(location) {
    console.log("latitude is " + location[0] + " and longitude is " + location[1]);
});   //location is the array with the gps coordinates, created by getLocation

这样的事情：

var myimage = "...some image reference here, equivalent to above";

getLocation(myimage, function(location){
console.log("latitude is " + location[0] + " and longitude is " + location[1]);
});   //location is the array with the gps coordinates, created by getLocation

我不想使用HTML div，因为最终我将从数据库中检索图像并使用代码来处理＆＃34;处理＆＃34;他们。我尝试使用document.createElement，但似乎没有用。

如果我理解正确

var x = document.getElementByID("img1");

将参考存储到变量＆＃39; x＆＃39;中的图像中。而

var x = document.createElement("img1");
x.setAttribute("src", "img1.jpg");

实际创建并存储图像DOM对象本身？在任何情况下，使用document.createElement的代码都没有成功处理＆＃39; x＆＃39;在第二个例子中，似乎没有正确的方法来做到这一点。

我该如何解决这个问题？感谢。

全部：根据您的输入和各种尝试，我已决定使用新的Image（）;它的工作非常出色.....但是，只有在MOZILLA！我已经设置了一个图像对象的示例数组，代码依次处理数组中的图像，拉出GPS坐标并将它们记录到控制台。但是，在Chrome中，它只为一个图像返回一个集合，经过大量的试验和错误后，它似乎仅适用于HTML中列出的图像（我想删除它！）....不确定为什么Mozilla会表现出单向和Chrome的不同，除非它与缓存有关.....实际上，如果我在Mozilla中刷新它会重新加载并重新运行代码，但在Chrome中我不会得到刷新浏览器时记录的gps坐标。事实上，我的大部分时间都浪费在试图修复＆＃34;工作正常的代码（至少在Mozilla中）。这是当前版本：

<!doctype html>
<html>
<head>
<script type="text/javascript" src="exif.js"></script>

</head>
<body>



<br/><br/>
<img src="coussay.jpg" id="img1" />
<br/>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

function convertDMtoDD (coordinates, direction) {

//convert the decimal minutes coordinate array to decimal degrees
//set the sign based on direction where "S" or "E" is negative

    gpsdegrees = (coordinates[0]);
    gpsminutes = (coordinates[1]);  
    leftminutes = Math.floor(gpsminutes);   
    rightminutes = (gpsminutes - leftminutes) / 60; 
    leftminutes = leftminutes / 60;  
    rightminutes = leftminutes + rightminutes;
    degdecimal = (gpsdegrees + rightminutes).toFixed(6);

    if (direction == "S" || direction == "W") {

        degdecimal = 0 - degdecimal;

    }

    return degdecimal;

}


function getLocation(myimage, fn) {

    //EXIF.getData in the EXIF.js library gets the EXIF data from the raw image DOM object 

    myimage.onload=EXIF.getData(myimage, function() {


        //EXIF.getTag pulls the various data for each tag such as latitude, longitude, etc.
        //lati and longi are arrays containing decimalminutes values; latd and longd are single values of either "N", "S", "W", or "E")
        var lati = EXIF.getTag(this, "GPSLatitude");
        var latd = EXIF.getTag(this, "GPSLatitudeRef");

        var longi = EXIF.getTag(this, "GPSLongitude");
        var longd = EXIF.getTag(this, "GPSLongitudeRef");

        var location = [];
        //convert data from decimal minutes to decimal degrees and set direction as neg or pos
        location[0] = convertDMtoDD(lati, latd);
        location[1] = convertDMtoDD(longi, longd);


        fn(location);

    });



}

var imagelist = [

                {name: 'Chateau Coussay', src: 'coussay.jpg'},
                {name: 'Chateau Courlaine', src: 'coulaine.jpg'},
                {name: 'Chateau Sainte-Chapelle', src: 'chapelle.jpg'} 
            ];

for (var i=0; i<imagelist.length; i++)   {  
    var myimage = new Image();

    myimage.src = imagelist[i].src;

    getLocation(myimage, function(location) {

        console.log("latitude is " + location[0] + " longitude is " + location[1]);  

    });

}

</script>



</body>
</html>

Answer 1

您需要使用正确的标记名称 img ，而不是 img1 。

var x = document.createElement("img");
x.setAttribute("src", "img1.jpg");

您可能还需要将元素添加到DOM中，可能是这样的：

document.getElementById("img-container").appendChild(x);

如何在Javascript中创建一个等同于document.getElementById的图像引用？

1 个答案: