Robert James Metcalfe Blog

Delving more into Exif data related issues, as with yesterday’s PHP Exif Quiz Data Nuances Tutorial, we were intrigued by Exif data items such as …


EXIF.SubjectLocation: 2014,1514,2218,1328


… and our research tells us sometimes it may go “EXIF.SubjectArea 2014,1514,2218,1328”. That research lead us to realize that Exif data item can be used to filter the photograph image data and clip and crop to the graphics part Exif assesses as the “subject” of the photograph.

We came up with the PHP …

<?php

// Thanks to https://www.google.com/search?q=show+img+within+div+cropped&rlz=1C5OZZY_en&oq=show+img+within+div+cropped&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIJCAEQIRgKGKABMgkIAhAhGAoYoAEyBwgDECEYjwIyBwgEECEYjwLSAQg5Njc4ajBqN6gCALACAA&sourceid=chrome&source=chrome.ob&ie=UTF-8
$clockline2.="\n document.getElementById('topsel').innerHTML+='<option id=optzoom value=zoomin>Zoom In</option>'; \n";
$clockline2.="\n document.getElementById('optzoom').title=' ... on Exif photograph subject'; \n";
$clockline2.="\n document.getElementById('dzoom').style.display='none'; \n";
$clockline2.="\n document.getElementById('dzoom').style.overflow='hidden'; \n";
$clockline2.="\n document.getElementById('dzoom').title='Image subject, as determined by Exif, zoomed in on ... click zooms in more or right click or touch move to zoom out a bit.'; \n";
$clockline2.="\n document.getElementById('dzoom').style.height='" . $valsare[2] . "px'; \n"; // was width
$clockline2.="\n document.getElementById('dzoom').style.width='" . $valsare[3] . "px'; \n";
$clockline2.="\n document.getElementById('dzoom').innerHTML='<img onload=altize(this); id=izoom style=position:absolute;left:-" . ($valsare[1] - ($valsare[3] / 2)) . "px;top:-" . ($valsare[0] - ($valsare[2] / 2)) . "px; src=" . $image . " alt=></img>'; \n";
$clockline2.="\n document.getElementById('dzoom').setAttribute('data-scale','0.104'); \n";
//$clockline2.="\n document.getElementById('dzoom').style.transformOrigin='top left'; \n";
$clockline2.="\n document.getElementById('dzoom').style.transform='scale(0.104)'; \n";
$clockline2.="\n document.getElementById('izoom').onclick=function(event){ document.getElementById('dzoom').setAttribute('data-scale','' + eval(0.1 + eval(document.getElementById('dzoom').getAttribute('data-scale')))); document.getElementById('dzoom').style.transform='scale(' + eval(document.getElementById('dzoom').getAttribute('data-scale')) + ')'; }; \n";
$clockline2.="\n document.getElementById('izoom').oncontextmenu=function(event){ event.preventDefault(); document.getElementById('dzoom').setAttribute('data-scale','' + eval(-0.1 + eval(document.getElementById('dzoom').getAttribute('data-scale')))); document.getElementById('dzoom').style.transform='scale(' + eval(document.getElementById('dzoom').getAttribute('data-scale')) + ')'; }; \n";
$clockline2.="\n document.getElementById('izoom').ontouchmove=function(event){ event.preventDefault(); document.getElementById('dzoom').setAttribute('data-scale','' + eval(-0.1 + eval(document.getElementById('dzoom').getAttribute('data-scale')))); document.getElementById('dzoom').style.transform='scale(' + eval(document.getElementById('dzoom').getAttribute('data-scale')) + ')'; }; \n";

?>

… using the changed PHP read_exif_off_image_rotate.php you might want to try standalone used in the Scenery Geolocation Quiz also shown below.

Stop Press

We ended up zooming away a lot … and it set us to trying this on some older Exif containing images. It taught us that Exif must change a lot through history and regarding the digital photography source device, we’re thinking?! These older Exif in our realm contained no EXIF.SubjectLocation nor EXIF.SubjectArea but always describe Width and Height (or Length) in some way shape or form. In this scenario, why not simulate our own EXIF.SubjectLocation: [midY],[minX],[imgHeight],[imgWidth] such that more people can “zoom about” using the changed PHP read_exif_off_image_rotate.php perhaps in standalone mode?

---

Previous relevant PHP Exif Quiz Data Nuances Tutorial is shown below.

We think the recent PHP Exif Quiz Question and Answer Tutorial‘s underlying …


PHP reading image Exif data


… talents can be extended via a couple of visual ways to enhance and represent two Exif data related pieces of information, those being …

• Image direction
• Altitude

… via new Javascript …

<?php echo ”

var ibrgis=0.0, valisd='';
if (document.getElementById('exw') && document.getElementById('mycompass')) {
if (document.getElementById('mycompass').innerHTML == '') {
var elids=['mycompass', 'myaltitude'];
var exifids=['ImgDirection:', 'GPSAltitude:'];
var rotids=['-999', '-90'];
var contideas=[String.fromCodePoint(0x2B06,0xFE0F),''];
for (var iio=0; iio<elids.length; iio++) {
if (document.getElementById(elids[iio])) {
if (document.getElementById('exw').innerHTML.indexOf(exifids[iio]) != -1) {
ibrgis=0.0;
valisd=document.getElementById('exw').innerHTML.split(exifids[iio])[1].split('&')[0].split('<')[0].trim();
if (valisd.indexOf('/') != -1) {
ibrgis=eval(valisd);
} else if (valisd.trim() != '') {
ibrgis=eval(valisd);
}
if (contideas[iio] == '') {
document.getElementById(elids[iio]).innerHTML='<progress style=opacity:0.8;accent-color:green;height:45px; value=' + Math.round(ibrgis) + ' min=0 max=8850></progress>';
document.getElementById(elids[iio]).onclick=function(event){ alert(document.getElementById('myaltitude').title); };
document.getElementById(elids[iio]).title=document.getElementById(elids[iio]).title.replace(/.$/g, ' ' + ibrgis + '');
document.getElementById(elids[iio]).style.display='inline-block';
document.getElementById(elids[iio]).style.transform = ('rotate(' + rotids[iio] + 'deg) scale(" . $snbs . ")');
} else {
document.getElementById(elids[iio]).innerHTML=contideas[iio];
document.getElementById(elids[iio]).onclick=function(event){ alert(event.target.title); };
document.getElementById(elids[iio]).title=document.getElementById(elids[iio]).title.replace(/.$/g, ' ' + ibrgis + String.fromCodePoint(0x00B0) + '');
document.getElementById(elids[iio]).style.display='inline-block';
document.getElementById(elids[iio]).style.transform = ('rotate(' + Math.round(ibrgis) + 'deg)');
}
}
}
}
}
}

“; ?>

… via …

• a changed grid_fitting_in.html Scenery Geolocation Quiz also shown below … being helped out by …
• the changed PHP read_exif_off_image_rotate.php you might want to try standalone perhaps?

---

Previous relevant PHP Exif Quiz Question and Answer Tutorial is shown below.

Regarding yesterday’s PHP Exif Quiz Geographicals Tutorial‘s Scenery Geolocation Quiz web application there were the image numbers which amounted to “unsuitable for Exif” purposes, which we negated, for us to consider, where to do nothing we deemed less ideal than to …

• for those negative image IDs, in the grid, we can pose a question within a Javascript prompt window we can ask of the user, out of …
  
var qs=["What is the tallest mountain on the South Island (and all of New Zealand)?",
"What is the largest lake located on the South Island?",
"In what year were the North Island and South Island officially named?",
"Which famous historic church sits on the edge of Lake Tekapo?",
"Which body of water separates the South Island from Stewart Island?",
"What famous steamship cruises across Lake Wakatipu in Queenstown?",
"Which limestone rock formations are a major tourist stop on the West Coast?",
"What words could describe the character of the kea bird?",
"What weight of wool in kilograms was Shrek as he exited the cave near Bendigo Station in 2004?",
"What varietal of wine is grown in Central Otago?",
"Is Cromwell's Big Fruit larger than Robertson's Big Potato?",
"Is Lake Wanaka deeper than Sydney Harbour?",
"Is Clutha River deeper than Sydney Harbour?",
"What is the Māori name for New Zealand greenstone?",
"In which river of the 1860s Otago gold rush was most gold found?",
"Does New Zealand have a longer coastline than China?",
"What sport do the All Whites play?",
"What year were the All Blacks rugby team last beaten at Eden Park, here in October, 2026?",
"If 73.6 million people, as of October 2026, live between latitude 45°N and 46°N how many million to nearest whole number live between latitude 45°S and 90°S?"];

• and analyze the answer, scoring in a way that answer parts not addressed contribute to the sadness of “big scores mean less success” paradigm we have going for the Geolocation Quiz parts, as per …
  
function quizimgid(divo) {
var thisq=Math.floor(Math.random() * qs.length), wdsleft=0, ii=0, jj=0;
if (divo.innerHTML.indexOf('-') == 0) {
var ansis=prompt(qs[thisq], '');
if (ansis == null) { ansis=''; }
var wdsare=as[thisq].split(',')[0].split('(')[0].trim().replace(' / ',' ').replace(' at ',' ').toLowerCase().split(' ');
wdsleft=wdsare.length;
if (ansis.trim() != '') {
var qansare=ansis.toLowerCase().split(' ');
for (ii=0; ii<eval('' + qansare.length); ii++) {
for (jj=0; jj<eval('' + wdsare.length); jj++) {
if (wdsare[jj] == qansare[ii]) { wdsleft--; }
}
}
}
if (wdsleft > 0) {
forans=" <font size=1>(for answer " + as[thisq] + ")</font>";
} else {
forans=" <font size=6>(Congratulations!!)</font>";
}
document.getElementById('myh1').title='' + wdsleft;
} else {
divo.style.backgroundImage='url(//www.rjmprogramming.com.au/NZ/IMG_' + divo.innerHTML + '.jpeG)';
divo.style.backgroundSize='contain';
divo.style.backgroundRepeat='no-repeat';
if (woo) {
if (!woo.closed) {
woo.close();
woo=null;
}
}
woo=window.open('//www.rjmprogramming.com.au/PHP/read_exif_off_image_rotate.php?image=http://www.rjmprogramming.com.au/NZ/IMG_' + divo.innerHTML + '.jpeG', '_blank', 'top=100,left=' + eval(-800 + screen.width) + ',width=800,height=800');
}
}


… as our way to add some variety to the quiz via a changed grid_fitting_in.html also shown below.

---

Previous relevant PHP Exif Quiz Geographicals Tutorial is shown below.

Yesterday’s PHP Exif Quiz Tutorial‘s Scenery Geolocation Quiz, as far as follow up “Geographicals Based Interfacings” went, offered …

• Google Maps … but today we add onto that idea …
• Google Earth … and …
• Google Charts Geo Chart inhouse interfacer …

… off which, it being “inhouse”, a click/tap offers other “Geographicals” (ie. latitude, longitude) based interfacing options … via …

• a changed grid_fitting_in.html also below … calling …
• the changed PHP read_exif_off_image_rotate.php

---

Previous relevant PHP Exif Quiz Tutorial is shown below.

You guessed it^? After yesterday’s …

• PHP Exif Retention off iPhone Images Tutorial work … and applying work of the recent …
• List to Grid Layout Primer Tutorial and adding a changed grid_fitting_in.html

… we’d be coming up with a …

Scenery Geolocation Quiz

Yay!!!!!!!!!!!!!!!!

Click here to see what we mean …

Did you know?

Regarding testing PHP web applications, especially up at our public RJM Programming website (more so because newer versions of AlmaLinux Apache/PHP/MySql configurations will drop some of the PHP modules you have previously (re-)installed, and you have to keep, at least for us, “stumbling onto” the issue), you can occasionally encounter …

HTTP Error Code 500 … Internal Error

… issues, as we did at one stage deploying the Scenery Geolocation Quiz above.

To both research the problem, and fix it we access the public RJM Programming AlmaLinux Apache/PHP/MySql website’s WHM cPanel environment’s web server command line accessing Terminal option, going …

• dnf list “*exif*” # to perform the research … and in our PHP version 8.1.? case …
• dnf install ea-php81-php-exif.x86_64 # to fix the HTTP Error Code 500 related problem

---

Previous relevant PHP Exif Retention off iPhone Images Tutorial is shown below.

We have a new project on the go. We want to retain Exif information, that is contained within our iPhone’s *.HEIC formatted photographs, all the way through to some format and form of RJM Programming public website set of image media files.

And so, as well as referencing previous work such as that of PHP Exif Image Information Revisit Tutorial and Command Line ImageMagick HEIC to JPEG Image Creation Tutorial, we asked of Google retaining exif information of iPhone images all the way to uploading via filezilla to a web server, finding pertinent and useful the advice …

To retain EXIF data from an iPhone all the way to a web server via FileZilla, you must bypass mobile browser compression and ensure lossless transfer protocols.

AirDrop or Cable Transfer: Transfer the file from the Files app or Photos library to a Mac or PC using AirDrop or a direct USB cable.

And so, that is today’s first step on the new project, where if we cannot retain Exif the project is not worth continuing with.

Keep your hair on! It worked using our ImageMagick conversions to *.jpeG (from iPhone AirDrop^ped *.HEIC) here on this MacBook Air and FileZilla (sftp) uploading those to our new folder on the RJM Programming web server for images like …

… as one example.

---

Previous relevant PHP Exif Image Information Revisit Tutorial is shown below.

Another “revisit” today to the PHP Exif Information web application displayer of PHP Exif Image Zip Mystery Game Hints Tutorial. Now supposing we put this scenario to you …

• you are working in PHP … ie. you have to work in a serverside “something” for the purposes of Exif work …
• your webpage has a top header bit that goes the full way across the webpage … and …

• your webpage has a one line form footer bit that goes the full way across the webpage … and …

• between that you want to display …
  1. Exif textual information … and …
  2. the image that the Exif is talking about, and we want it (as an improvement for today’s work) …
     • proportional (ie. retain the image’s original aspect ratio)
     • not repeated
     • above the fold
     • fully shown

Now we ask you, in PHP, do you need to know the dimensions of that image to satisfy the requirements above? Well, we first thought (surely it must be) so, but going through the motions of doing today’s work, we realized that, though you can (for the PHP global $image variable with the image URL) …


list($width, $height, $type, $attr) = getimagesize($image);


… in PHP to determine those image dimensions, with the way our web application works, we didn’t need to, as you can “link” PHP with the CSS calc function to bypass any Javascript (eg. DOM) client script approach, abstracting the need to know hard and fast dimensions in PHP (and consequently not running into any window resizing or zooming issues (as a matter of fact, zooming up can make the Exif text information resize up quite nicely thank you very much and don’t mind if I do but we digress and so and usefully))


if ($image != "") {
list($width, $height, $type, $attr) = getimagesize($image);
// $iwidth=$width;
// $iheight=$height;
// $csswh=" width:" . $iwidth . "px; height:" . $iheight . "px; ";
$csswh=" width: calc(100% - 10px); height: calc(100% - 220px); text-align: right; margin-right: 20px; } form { position: absolute; left:50px; top: calc(100% - 45px); width:100%; height:40px; ";
}


… used later on to build up the HTML for the webpage, that also looks much better because the image and Exif wording are more likely to be separated from each other now …


$htmlis="<html><head>" . $javascript . "<style>" . $bcsscolour . " div { font-size:9px; overflow: visible; float:right; " . $csswh . " } </style><meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes'><title>Exif for " . $image . "</title></head><body style='background-color:" . $bcolour . ";'><h1 id='myh1'>Exif <select onchange=\"if (this.value.length == 2) { top.alinktop=''; top.document.getElementById('dexif').innerHTML=''; top.location.href=top.document.URL.split('index.')[0]+'index-ssmhalf.html'; } else { var zipurl=prompt('Enter image zipfile URL for Mystery Trip game (good for 2 players)','mysterytrip.zip'); if (zipurl != null) { if (zipurl.toLowerCase().indexOf('.zip') != -1) { location.href=document.URL.split('#')[0].split('?')[0] + '?image=' + encodeURIComponent(zipurl); } } } \"><option value=''>for</option><option value=' '>zipfile</option>" . $anotheroption . "</select> " . $image . "</h1><h3>RJM Programming - August, 2016 <a id='ageolocation style='visibility:hidden;' href='#mygeolocation'>Geolocation Context for Photograph" . $various . "</a></h3><h4>Thanks to <a target=_blank title=Useful href=//www.v-nessa.net/2010/08/02/using-php-to-extract-image-exif-data>http://www.v-nessa.net/2010/08/02/using-php-to-extract-image-exif-data</a></h4><div onclick=\"window.open('" . $image . "','_blank','top=5,left=5');\" style='background-color:yellow; background: url(" . str_replace("/Applications/MAMP/htdocs/","http://localhost:8888/",$image) . ") no-repeat; background-position: 5px; background-size: contain; '><br>" . "        Image type of " . $image . " is: " . $types[$imagetype];


The changed PHP read_exif_off_image_rotate.php includes these aesthetic and usability improvements you can test for yourself at this live run link.

---

Previous relevant PHP Exif Image Zip Mystery Game Hints Tutorial is shown below.

Just like with the recent PHP Wikipedia Geo Map Google Chart Tutorial we find a use for the talents of Google Chart …

• Map Chart
• Geo Chart

… as we improve the functionality of our “Mystery Trip in Images Game” we started with yesterday’s PHP Exif Image Zip Mystery Game Primer Tutorial.

They are used respectively for …

• final view of a map of the trip after the second player has finished their guessing of Start and Finish place characteristics (as we also do with another Google Maps window, thanks, that gives directions between two (latitude, longitude) sets)
• as a mechanism to provide a hint (that is not totally obvious, and thereby giving the game away)

And so today we can take you to a real zip file of JPEG images of a Mystery Trip, taken on an iPhone that you can try with a second player at this live run link.

The photos were taken deliberately to be obtuse, so as not to give the game away with their visual content. How are we able to give you hints in a programmatical sense? Well, on a JPEG coming out of an iPhone there is geodata (metadata latitude and longitude) stored that we access via Exif image attribute (PHP) methods.

The changed PHP read_exif_off_image_rotate.php includes these “best for two player” game interactive improvements, as well as allowing the user be able to reach this Mystery Game from old URL (simpler) arrangements, from older incarnations (you can read below).

---

Previous relevant PHP Exif Image Zip Mystery Game Primer Tutorial is shown below.

There’s a fair bit to the design of a new game we’re developing that uses the image metadata ideas from PHP Exif Image Information Rotation Tutorial in its workings.

Our early days work starts down the road by collecting zipfile and other pertinent Exif data item ideas off …

• first game player, who sets up the game parameters while player 2 is not watching, in a form that is submitted ahead of …
• second player then turns around and tries to guess details of a Start place and End place, and any other places photographed by player 1

As you can see to simplify things we are introducing PHP zipfile coding to group together a set of photographs into the one file concept.

It will be tomorrow that you see a more complete and rounded game solution, and by then we can come up with a name for it too!

Feel free to try the changed read_exif_off_image_rotate.php live run to try out this game in an early incarnation.

---

Previous relevant PHP Exif Image Information Rotation Tutorial is shown below.

The “Stop Press” of PHP Exif Image Information Primer Tutorial as shown below, introduced us to some PHP able to glean quite a bit of really useful Exif information stored with an image file, perhaps straight off a digital camera or mobile phone or mobile tablet. We use the great advice of http://www.v-nessa.net/2010/08/02/using-php-to-extract-image-exif-data to cycle through this information.

This information was of interest regarding …

Sometimes you’ll see Gimp using exif functionality when it becomes aware of the possibility your image could be rotated to advantage

… as we saw Gimp doing this in relation to a photograph image coming off my Android Mobile Phone that we used, in its “rotated-by-Gimp” form, in our recent Mindfulness Follow Up Tutorial. But how about if we want to detect what Gimp detects, to fix this camera orientation issue ourselves? Well, in amongst the Exif information, we found …

• IFD0.Orientation: 6 … and then surfing the web we found …
• this useful link explaining this Exif setting … thanks

… which gave us the means to apply a rotation the way Gimp does. How did we decide to apply this rotation? There are lots of ways, and we decided on this occasion to use CSS and apply a background image, with a transformation, to an HTML div element, also showing all that Exif information. We do this with new PHP you could call read_exif_off_image_rotate.php that has this corresponding new live run link. To get there, from where we’ve last been, take a skeg here.

So, coming back to our “clouds” photo we saw an Exif IFD0.Orientation value of 6 and consulted this useful link to find that we should rotate the image by 90 degrees. We do this with the HTML and inline CSS that goes, for the encasing HTML div element …


<div style='background-color:yellow; background: url(clouds.jpg); opacity:0.6; norepeat; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); '>
</div>


… in regard to using the original camera image …

Now you may have heard of geographical knowledge stored within photographs, and perhaps you’ll see the live run‘s (turn your head or computer) …


GPS.GPSVersion


… that if fleshed out, with other data elements underneath, would put that image into the category of those where geographical information resides. You may want to start reading more about (the huge topic of) “Geotagging” from this useful Wikipedia webpage … thanks.

---

Previous relevant PHP Exif Image Information Primer Tutorial is shown below.

Our (Mac OS X laptop) local MAMP web server is an Apache/PHP/MySql web server. In this environment you can find out a lot with some PHP code as per …

<?php phpinfo(); ?>

… and if, in doing this, you find a reference to the “exif” Exchangeable Image Information functionality existing, you are a lucky candidate to introduce some image “interrogation” (but not this) logic to your PHP code.

We followed a lot of the advice of the very useful link (thanks) to create some PHP called …

• exif_tester.php

… where we may (or maybe not) be waking you up (before we go go ‘Cause I’m not plannin’ on going solo yo (to be honest, like)) … it’s a slow news day … to the fact that images can show on a web page but may not be all you would understand them to be … shock, horror!

Yes, an image that is a GIF in all but name will often display fine even if it’s been given a name like MyNameIs.Jpeg man person.

If this outrage makes you …

• a) fall on the floor laughing
• b) cause a road rage incident
• c) wake up in a cold sweat
• d) wake up in a warmish to lukewarm sweat
• e) tear the cat’s hair out (no animals were harmed in the making of this blog posting)

… then we’re here to tell you that you need to take a Bex and have a lie down.

In any case, there is a solution to this in PHP if the exif functionality is available to you, and this matter is of concern, and you can see us showing you how to test for that with the code above and this live run. Sometimes you’ll see Gimp using exif functionality when it becomes aware of the possibility your image could be rotated to advantage … we’ve had this happen and thanked Gimp with more than the usual toast and herbal tea offerings you’d be used to giving … we take it?!

Stop Press

As of 8/8/2016 (well, what do you know? … understood everywhere!?) we’re revisiting Exif and PHP to learn more and our tutorial picture now reflects the early days of the revisit and the new resultant PHP we wrote, that you could call read_exif_off_image.php, inspired, largely from http://www.v-nessa.net/2010/08/02/using-php-to-extract-image-exif-data (thanks), and has this live run link, the output of which is pointed to by the red arrow in the tutorial picture.

If this was interesting you may be interested in this too.

---

If this was interesting you may be interested in this too.

---

If this was interesting you may be interested in this too.

---

If this was interesting you may be interested in this too.

---

If this was interesting you may be interested in this too.

---

If this was interesting you may be interested in this too.

---

If this was interesting you may be interested in this too.

---

If this was interesting you may be interested in this too.

---

If this was interesting you may be interested in this too.

---

If this was interesting you may be interested in this too.

---

If this was interesting you may be interested in this too.