如何使用Javascript创建等效于document.getElementById的图像引用？

Question

I have javascript code that retrieves GPS coordinates from a geotagged image. 我有JavaScript代码，可从经过地理标记的图像中检索GPS坐标。 I use document.GetElementByID which loads a variable with (as I understand it) the reference to the HTML image object. 我使用document.GetElementByID加载变量（据我所知），该变量具有对HTML图像对象的引用。 It then passes that reference to my custom code which then retrieves the GPS coordinates from the image. 然后，它将引用传递给我的自定义代码，然后从该自定义代码中检索图像中的GPS坐标。 This all works beautifully. 这一切都很漂亮。

I want to eliminate the HTML image div and ID, and simply send my function the SAME sort of reference using purely javascript, without using document.GetElementById. 我想消除HTML图像的div和ID，仅使用纯JavaScript而不使用document.GetElementById将函数的SAME引用发送给我。

Basically, I want to convert from this: 基本上，我想从此转换：

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

to something like this: 像这样：

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

I don't want to use HTML divs as eventually I will be retrieving images from a db and using the code to "process" them. 我不想使用HTML div，因为最终我将从数据库中检索图像并使用代码“处理”它们。 I tried using document.createElement but that didn't seem to work. 我尝试使用document.createElement，但这似乎不起作用。

If I understand it correctly 如果我理解正确

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

stores a reference to the image in the variable 'x' whereas 将对图像的引用存储在变量“ x”中，而

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

actually creates and stores the image DOM object itself?? 实际创建并存储图像DOM对象本身？ In any case, the code using document.createElement didn't successfully process 'x' in the second example, so it appears that isn't the right way to do this. 无论如何，在第二个示例中，使用document.createElement的代码无法成功处理'x'，因此看来这不是正确的方法。

How would I resolve this? 我该如何解决？ Thanks. 谢谢。

All: based on your inputs and various attempts, I've settled on using new Image(); 全部：根据您的输入和各种尝试，我决定使用new Image（）;。 etc. and it works brilliantly.....BUT, only in MOZILLA! 等等，效果非常好.....但是，仅在MOZILLA中！ I've set up a sample array of image objects, and the code processes the images in the array in turn, pulling the GPS coordinates and logging them to the console. 我已经建立了一个图像对象数组示例，代码依次处理该数组中的图像，提取GPS坐标并将其记录到控制台中。 In Chrome, however, it only returns a single set for one image, and after lots of trial and error it seems to work ONLY for the image listed in the HTML (which I wanted to remove!).... Not sure why Mozilla would behave one way and Chrome differently unless it has something to do with cacheing.....in fact, if I refresh in Mozilla it re-loads and re-runs the code perfectly, but in Chrome I don't get the gps coordinates logged when I refresh the browser. 但是，在Chrome中，它只为一个图像返回一组图像，经过反复试验，它似乎仅适用于HTML中列出的图像（我想删除它！）。除非是与缓存有关，否则它的行为将与Chrome不同，.....实际上，如果我在Mozilla中刷新，它将重新加载并重新完美运行代码，但是在Chrome中，我无法获得gps刷新浏览器时记录的坐标。 In fact, much of my time was wasted trying to "fix" code that works fine (at least in Mozilla). 实际上，我的大部分时间都浪费在尝试“修复”运行良好的代码上（至少在Mozilla中如此）。 Here's the current version: 这是当前版本：

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

You need to use the proper tag name img , not img1 . 您需要使用正确的标签名称img ，而不是img1 。

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

You may also need to add the element into the DOM, perhaps like so: 您可能还需要将元素添加到DOM中，如下所示：

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

如何使用Javascript创建等效于document.getElementById的图像引用？

问题描述

1 个解决方案

解决方案1
1 2016-10-24 23:43:23

如何使用Javascript创建等效于document.getElementById的图像引用？

问题描述

1 个解决方案

解决方案1 1 2016-10-24 23:43:23

解决方案1
1 2016-10-24 23:43:23