load image async and handle errors in WMS
by Leo
HTML
<input type="button" value="loadImage" id="btn"/>
<div id="conatiner"></div>
<img id="img" width="200px" height="200px"/>
JavaScript
//http://jsfiddle.net/ZSJpc/2/
//http://stackoverflow.com/questions/3195865/converting-byte-array-to-string-in-javascript
function loadImage(path, imgElement)
{
var setDataToImage = function(contentType, arraybuffer, imgElement)
{
var objectURL = window.URL.createObjectURL(
new Blob([arraybuffer], {'type': contentType})
);
imgElement.src = objectURL;
}
var contentType,
base64DataRegexp = /data:(.*?);base64,(.*)/i, base64dataParts, data, dataArray
if (path.indexOf("data:") === 0 && (base64dataParts = base64DataRegexp.exec(path)))
{
contentType = base64dataParts[1];
data = atob(base64dataParts[2]);
var dataArray = new Uint8Array(data.length);
for (var i = data.length - 1; i >= 0; i--) {
dataArray[i] = data.charCodeAt(i);
}
setDataToImage(contentType, dataArray.buffer, imgElement);
}
else
{
var xhr = new XMLHttpRequest();
xhr.open("GET", path, true);
xhr.responseType = "arraybuffer";
xhr.addEventListener('load', function(){
if (xhr.status === 200) {
contentType = xhr.getResponseHeader('content-type');
if(contentType.indexOf('image') !== 0 || contentType == "text/xml" || contentType == "application/vnd.ogc.se_xml"
/* !!!! see type in GetCapabilities !!! and Root is ServiceExceptionReport*/
)
{
var errorMessage = String.fromCharCode.apply(String, new Uint8Array(xhr.response));
alert("WMS ERROR: \n\n" + errorMessage);
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
}
setDataToImage(contentType, xhr.response, imgElement);
}
});
xhr.send();
}
}
var url1 = "https://upload.wikimedia.org/wikipedia/commons/e/e5/HTTPS_icon.png";
var url2 =...