<html>
<head>
<script>
function GetXmlHttpObject() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject) {
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function getImage(imageURL) {
document.getElementById('imageDiv').innerHTML = "<img id='myImage' src='" + imageURL + "' />";
}
function measureImage() {
var myImage = document.getElementById('myImage');
document.getElementById('imageWidth').value = myImage.width;
document.getElementById('imageHeight').value = myImage.height;
sendMeasurementsToServer();
}
function sendMeasurementsToServer() {
xmlhttpSendMeasurementsToServer = GetXmlHttpObject();
if (xmlhttpSendMeasurementsToServer == null) {
alert("Your browser does not support XMLHTTP!");
return;
}
var imageURL = document.getElementById('imageURL').value;
var imageWidth = document.getElementById('imageWidth').value;
var imageHeight = document.getElementById('imageHeight').value;
url = "savemeasurements.asp?ImageURL=" + imageURL + "&ImageHeight=" + imageHeight + "&ImageWidth=" + imageWidth;
url = url + "&sid=" + Math.random();
xmlhttpSendMeasurementsToServer.onreadystatechange = function() {
if (xmlhttpSendMeasurementsToServer.readyState == 4) {
var aspResponse = xmlhttpSendMeasurementsToServer.responseText;
alert(aspResponse);
}
}
xmlhttpSendMeasurementsToServer.open("GET", url, true);
xmlhttpSendMeasurementsToServer.send(null);
}
</script>
<head>
<body>
Enter image URL
<input type="text" id="imageURL" style="width:500px;padding:10px;">
<input type="button" value="Measure" onclick="getImage(document.getElementById('imageURL').value); measureImage();">
<div id="imageDiv"></div>
Client-side measurement
<br>
Width:<input type="text" id="imageWidth">
Height:<input type="text" id="imageHeight">
</body>
</html>
