Switch branches/tags
Nothing to show
Find file
f1ad327 Nov 21, 2012
@GPHemsley @city41
60 lines (44 sloc) 1.75 KB
<!DOCTYPE html>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at -->
<html lang="en-US">
<meta charset="UTF-8" />
<title>TIFF test</title>
<script src="tiff.js" type="text/javascript"></script>
<script type="text/javascript">
"use strict";
var prepareTIFF = function() {
var files = document.getElementById( "tiff-file" ).files;
var file = files[0];
if (files.length < 1 || file.type !== 'image/tiff') {
var reader = new FileReader();
reader.onload = function(e) {
var canvas = document.getElementById("tiff-image");
var canvasParent = canvas.parentNode;
// Load the TIFF parser.
var tiffParser = new TIFFParser();
console.log( tiffParser );
// Parse the TIFF image.
var tiffCanvas = tiffParser.parseTIFF(, canvas);
// Make it clear that we've loaded the image. = "solid";
console.log( tiffCanvas );
// Put the parsed image in the page.
canvasParent.replaceChild(tiffCanvas, canvas);
reader.readAsArrayBuffer( file );
<body onload="prepareTIFF();">
<form name="tiff-parser" method="post" enctype="multipart/form-data" style="margin: 10% auto auto; text-align: center;">
<input type="file" name="tiff-file" id="tiff-file" accept="image/tiff" required onchange="prepareTIFF();" />
<input type="button" name="parse" value="Parse TIFF" onclick="prepareTIFF();" />
<canvas id="tiff-image" style="display: block; max-width: 95%; margin: 2em auto; border: 1px dashed magenta; padding: 0px; background-color: #FFEEFF;"></canvas>