-
Notifications
You must be signed in to change notification settings - Fork 1
/
tiffcanvas.html
53 lines (50 loc) · 1.73 KB
/
tiffcanvas.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<title>UTIF.js Canvas demo</title>
<script src="./node_modules/utif/UTIF.js"></script>
<style>
canvas {
height: 75vw;
border: 1px solid black;
margin-top: 10px;
}
</style>
</head>
<body>
<script type="text/javascript">
var loadImage = function(filename) {
const xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', filename);
xhr.onload = function(e) {
// Decode image into canvas.
const pages = UTIF.decode(e.target.response);
// console.log('page count: ' + pages.length);
UTIF.decodeImage(e.target.response, pages[0]);
const rgba = UTIF.toRGBA8(pages[0]); // Uint8Array with RGBA pixels
// console.log(pages[0].width, pages[0].height, pages[0]);
if (rgba) {
const canvas = document.createElement('canvas');
canvas.width = pages[0].width;
canvas.height = pages[0].height;
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(pages[0].width, pages[0].height);
for (let i = 0; i < rgba.length; i++) {
imageData.data[i] = rgba[i];
}
ctx.putImageData(imageData, 0, 0);
// Create a label.
const description = document.createElement('div');
description.innerHTML = `<a href="${filename}">${filename}</a>
(width: ${canvas.width}, height: ${canvas.height})`;
document.body.append(description);
document.body.append(canvas);
}
};
xhr.send();
};
loadImage('images/kofax.tif');
</script>
</body>
</html>