如何在Javascript中创建一个相当于document.getElementById的图像引用?

How do I create an image reference in Javascript equivalent to a document.getElementById?

本文关键字：document 相当于 一个 getElementById 引用 图像 Javascript 创建      更新时间：2023-09-26

我有javascript代码从geotagged图像检索GPS坐标。我用文档。GetElementByID加载一个变量(据我所知)引用到HTML图像对象。然后，它将该引用传递给我的自定义代码，然后从图像中检索GPS坐标。

我想要消除HTML图像div和ID，并简单地使用纯javascript发送我的函数相同类型的引用，而不使用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

我不想使用HTMLdiv，因为最终我将从数据库检索图像，并使用代码来"处理"它们。我尝试使用文档。createElement，但这似乎不起作用。

如果我理解正确的话

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

存储对变量'x'中的图像的引用，而

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

实际上创建和存储图像DOM对象本身??在任何情况下，代码使用文档。在第二个例子中，createElement没有成功地处理'x'，所以这似乎不是正确的方法。

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

All:基于你的输入和各种尝试，我决定使用new Image();等等，而且效果很好.....但是，只有在MOZILLA!我已经设置了一个图像对象的示例数组，代码依次处理数组中的图像，提取GPS坐标并将其记录到控制台。然而，在Chrome浏览器中，它只返回一个图像的单一集，经过大量的试验和错误，它似乎只适用于HTML中列出的图像(我想删除!)....不确定为什么Mozilla会以一种方式行事，而Chrome不同，除非它与缓存有关.....事实上，如果我在Mozilla中刷新，它会完美地重新加载并重新运行代码，但在Chrome中，当我刷新浏览器时，我不会得到gps坐标记录。事实上，我的大部分时间都浪费在试图"修复"运行良好的代码上(至少在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>

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

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

您可能还需要将元素添加到DOM中，可能像这样:

document.getElementById("img-container").appendChild(x);
相关文章：