<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TIFF</title>
<style type="text/css">
figure {
border: 1px solid #000;
}
figcaption {
border-bottom: 1px solid #000;
padding: 0.25em;
background-color: #ccc;
}
</style>
</head>
<body>
<script type="text/javascript" src="/adapter/UTIF.js"></script>
<script type="text/javascript">
function request(method, url, responseType) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
if(responseType) xhr.responseType = responseType;
xhr.onload = resolve;
xhr.onerror = reject;
xhr.send();
});
}
function createElementX(tag, attrs) {
var res = document.createElement(tag);
if(attrs) for(var k in attrs) if(attrs.hasOwnProperty(k)) res.setAttribute(k, attrs[k]);
for(var i = 2, child; i < arguments.length; ++i) res.appendChild((typeof (child = arguments[i]) === 'string') || (child instanceof String) ? document.createTextNode(child) : child);
return res;
}
var pathname = window.location.pathname, filename = document.title = pathname.split('/').pop();
var body = document.body;
var header = document.createElement('div');
header.append(createElementX('a', { href: pathname }, 'Download ' + filename))
body.appendChild(header);
request('GET', pathname, 'arraybuffer').then(function(evt) {
var filedata = evt.target.response;
var cnv = document.createElement('canvas'), ctx = cnv.getContext('2d'), img;
var pages = UTIF.decode(filedata), page;
for(var i = 0; i < pages.length; ++i) {
UTIF.decodeImage(filedata, page = pages[i], pages);
var rgba = UTIF.toRGBA8(page);
ctx.putImageData(new ImageData(new Uint8ClampedArray(rgba.buffer), cnv.width = page.width, cnv.height = page.height), 0, 0);
body.appendChild(createElementX('figure', null, createElementX('figcaption', null, 'Page ' + (i + 1) + ' of ' + pages.length), img = createElementX('img', { src: cnv.toDataURL() })));
img.style.width = '100%';
}
})
</script>
</body>
</html>