|
|
@ -289,16 +289,15 @@ function loadFromArrayBuffer(ab) {
|
|
|
|
imageFilenames.push(f.filename);
|
|
|
|
imageFilenames.push(f.filename);
|
|
|
|
imageFiles.push(new kthoom.ImageFile(f));
|
|
|
|
imageFiles.push(new kthoom.ImageFile(f));
|
|
|
|
|
|
|
|
|
|
|
|
// add thumbnails to the TOC list
|
|
|
|
// add thumbnails to the TOC list
|
|
|
|
$('#thumbnails').append(
|
|
|
|
$('#thumbnails').append(
|
|
|
|
"<li> \
|
|
|
|
"<li> \
|
|
|
|
<a data-page='"+ imageFiles.length +"'> \
|
|
|
|
<a data-page='"+ imageFiles.length +"'> \
|
|
|
|
<img src='"+ imageFiles[imageFiles.length - 1].dataURI +"' /> \
|
|
|
|
<img src='"+ imageFiles[imageFiles.length - 1].dataURI +"' /> \
|
|
|
|
<span>"+ imageFiles.length +"</span> \
|
|
|
|
<span>"+ imageFiles.length +"</span> \
|
|
|
|
</a> \
|
|
|
|
</a> \
|
|
|
|
</li>"
|
|
|
|
</li>"
|
|
|
|
);
|
|
|
|
);
|
|
|
|
//}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var percentage = (ab.page+1) / (ab.last+1);
|
|
|
|
var percentage = (ab.page+1) / (ab.last+1);
|
|
|
|
totalImages = ab.last+1;
|
|
|
|
totalImages = ab.last+1;
|
|
|
@ -339,81 +338,93 @@ function setImage(url) {
|
|
|
|
updateScale(true);
|
|
|
|
updateScale(true);
|
|
|
|
canvas.width = innerWidth - 100;
|
|
|
|
canvas.width = innerWidth - 100;
|
|
|
|
canvas.height = 200;
|
|
|
|
canvas.height = 200;
|
|
|
|
x.fillStyle = "red";
|
|
|
|
x.fillStyle = "black";
|
|
|
|
x.font = "50px sans-serif";
|
|
|
|
x.textAlign="center";
|
|
|
|
|
|
|
|
x.font = "24px sans-serif";
|
|
|
|
x.strokeStyle = "black";
|
|
|
|
x.strokeStyle = "black";
|
|
|
|
x.fillText("Loading Page #" + (currentImage + 1), 100, 100);
|
|
|
|
x.fillText("Loading Page #" + (currentImage + 1), innerWidth/2, 100);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
if ($("body").css("scrollHeight") / innerHeight > 1) {
|
|
|
|
if (url === "error") {
|
|
|
|
$("body").css("overflowY", "scroll");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var img = new Image();
|
|
|
|
|
|
|
|
img.onerror = function() {
|
|
|
|
|
|
|
|
canvas.width = innerWidth - 100;
|
|
|
|
|
|
|
|
canvas.height = 300;
|
|
|
|
|
|
|
|
updateScale(true);
|
|
|
|
updateScale(true);
|
|
|
|
x.fillStyle = "orange";
|
|
|
|
canvas.width = innerWidth - 100;
|
|
|
|
x.font = "50px sans-serif";
|
|
|
|
canvas.height = 200;
|
|
|
|
|
|
|
|
x.fillStyle = "black";
|
|
|
|
|
|
|
|
x.textAlign="center";
|
|
|
|
|
|
|
|
x.font = "24px sans-serif";
|
|
|
|
x.strokeStyle = "black";
|
|
|
|
x.strokeStyle = "black";
|
|
|
|
x.fillText("Page #" + (currentImage + 1) + " (" +
|
|
|
|
x.fillText("Unable to decompress image #" + (currentImage + 1), innerWidth/2, 100);
|
|
|
|
imageFiles[currentImage].filename + ")", 100, 100);
|
|
|
|
} else {
|
|
|
|
x.fillStyle = "red";
|
|
|
|
if ($("body").css("scrollHeight") / innerHeight > 1) {
|
|
|
|
x.fillText("Is corrupt or not an image", 100, 200);
|
|
|
|
$("body").css("overflowY", "scroll");
|
|
|
|
|
|
|
|
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
|
|
|
|
if (/(html|htm)$/.test(imageFiles[currentImage].filename)) {
|
|
|
|
|
|
|
|
xhr.open("GET", url, true);
|
|
|
|
|
|
|
|
xhr.onload = function() {
|
|
|
|
|
|
|
|
//document.getElementById('mainText').style.display = '';
|
|
|
|
|
|
|
|
$("#mainText").css("display", "");
|
|
|
|
|
|
|
|
$("#mainText").innerHTML("<iframe style=\"width:100%;height:700px;border:0\" src=\"data:text/html," + escape(xhr.responseText) + "\"></iframe>");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
xhr.send(null);
|
|
|
|
|
|
|
|
} else if (!/(jpg|jpeg|png|gif)$/.test(imageFiles[currentImage].filename) && imageFiles[currentImage].data.uncompressedSize < 10 * 1024) {
|
|
|
|
|
|
|
|
xhr.open("GET", url, true);
|
|
|
|
|
|
|
|
xhr.onload = function() {
|
|
|
|
|
|
|
|
$("#mainText").css("display", "");
|
|
|
|
|
|
|
|
$("#mainText").innerText(xhr.responseText);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
xhr.send(null);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
img.onload = function() {
|
|
|
|
|
|
|
|
var h = img.height,
|
|
|
|
|
|
|
|
w = img.width,
|
|
|
|
|
|
|
|
sw = w,
|
|
|
|
|
|
|
|
sh = h;
|
|
|
|
|
|
|
|
settings.rotateTimes = (4 + settings.rotateTimes) % 4;
|
|
|
|
|
|
|
|
x.save();
|
|
|
|
|
|
|
|
if (settings.rotateTimes % 2 === 1) {
|
|
|
|
|
|
|
|
sh = w;
|
|
|
|
|
|
|
|
sw = h;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
canvas.height = sh;
|
|
|
|
|
|
|
|
canvas.width = sw;
|
|
|
|
|
|
|
|
x.translate(sw / 2, sh / 2);
|
|
|
|
|
|
|
|
x.rotate(Math.PI / 2 * settings.rotateTimes);
|
|
|
|
|
|
|
|
x.translate(-w / 2, -h / 2);
|
|
|
|
|
|
|
|
if (settings.vflip) {
|
|
|
|
|
|
|
|
x.scale(1, -1);
|
|
|
|
|
|
|
|
x.translate(0, -h);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (settings.hflip) {
|
|
|
|
|
|
|
|
x.scale(-1, 1);
|
|
|
|
|
|
|
|
x.translate(-w, 0);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
canvas.style.display = "none";
|
|
|
|
|
|
|
|
scrollTo(0, 0);
|
|
|
|
|
|
|
|
x.drawImage(img, 0, 0);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
updateScale();
|
|
|
|
var img = new Image();
|
|
|
|
|
|
|
|
img.onerror = function() {
|
|
|
|
|
|
|
|
canvas.width = innerWidth - 100;
|
|
|
|
|
|
|
|
canvas.height = 300;
|
|
|
|
|
|
|
|
updateScale(true);
|
|
|
|
|
|
|
|
x.fillStyle = "black";
|
|
|
|
|
|
|
|
x.font = "50px sans-serif";
|
|
|
|
|
|
|
|
x.strokeStyle = "black";
|
|
|
|
|
|
|
|
x.fillText("Page #" + (currentImage + 1) + " (" +
|
|
|
|
|
|
|
|
imageFiles[currentImage].filename + ")", innerWidth/2, 100);
|
|
|
|
|
|
|
|
x.fillStyle = "black";
|
|
|
|
|
|
|
|
x.fillText("Is corrupt or not an image", innerWidth/2, 200);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
|
|
|
|
if (/(html|htm)$/.test(imageFiles[currentImage].filename)) {
|
|
|
|
|
|
|
|
xhr.open("GET", url, true);
|
|
|
|
|
|
|
|
xhr.onload = function() {
|
|
|
|
|
|
|
|
//document.getElementById('mainText').style.display = '';
|
|
|
|
|
|
|
|
$("#mainText").css("display", "");
|
|
|
|
|
|
|
|
$("#mainText").innerHTML("<iframe style=\"width:100%;height:700px;border:0\" src=\"data:text/html," + escape(xhr.responseText) + "\"></iframe>");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
xhr.send(null);
|
|
|
|
|
|
|
|
} else if (!/(jpg|jpeg|png|gif)$/.test(imageFiles[currentImage].filename) && imageFiles[currentImage].data.uncompressedSize < 10 * 1024) {
|
|
|
|
|
|
|
|
xhr.open("GET", url, true);
|
|
|
|
|
|
|
|
xhr.onload = function() {
|
|
|
|
|
|
|
|
$("#mainText").css("display", "");
|
|
|
|
|
|
|
|
$("#mainText").innerText(xhr.responseText);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
xhr.send(null);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
img.onload = function() {
|
|
|
|
|
|
|
|
var h = img.height,
|
|
|
|
|
|
|
|
w = img.width,
|
|
|
|
|
|
|
|
sw = w,
|
|
|
|
|
|
|
|
sh = h;
|
|
|
|
|
|
|
|
settings.rotateTimes = (4 + settings.rotateTimes) % 4;
|
|
|
|
|
|
|
|
x.save();
|
|
|
|
|
|
|
|
if (settings.rotateTimes % 2 === 1) {
|
|
|
|
|
|
|
|
sh = w;
|
|
|
|
|
|
|
|
sw = h;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
canvas.height = sh;
|
|
|
|
|
|
|
|
canvas.width = sw;
|
|
|
|
|
|
|
|
x.translate(sw / 2, sh / 2);
|
|
|
|
|
|
|
|
x.rotate(Math.PI / 2 * settings.rotateTimes);
|
|
|
|
|
|
|
|
x.translate(-w / 2, -h / 2);
|
|
|
|
|
|
|
|
if (settings.vflip) {
|
|
|
|
|
|
|
|
x.scale(1, -1);
|
|
|
|
|
|
|
|
x.translate(0, -h);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (settings.hflip) {
|
|
|
|
|
|
|
|
x.scale(-1, 1);
|
|
|
|
|
|
|
|
x.translate(-w, 0);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
canvas.style.display = "none";
|
|
|
|
|
|
|
|
scrollTo(0, 0);
|
|
|
|
|
|
|
|
x.drawImage(img, 0, 0);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
updateScale();
|
|
|
|
|
|
|
|
|
|
|
|
canvas.style.display = "";
|
|
|
|
canvas.style.display = "";
|
|
|
|
$("body").css("overflowY", "");
|
|
|
|
$("body").css("overflowY", "");
|
|
|
|
x.restore();
|
|
|
|
x.restore();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
img.src = url;
|
|
|
|
img.src = url;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -528,19 +539,26 @@ function keyHandler(evt) {
|
|
|
|
|
|
|
|
|
|
|
|
function ImageLoadCallback(event) {
|
|
|
|
function ImageLoadCallback(event) {
|
|
|
|
var jso=this.response;
|
|
|
|
var jso=this.response;
|
|
|
|
if (jso.page !== jso.last)
|
|
|
|
// Unable to decompress file, or no response from server
|
|
|
|
{
|
|
|
|
if (jso === null){
|
|
|
|
// var secRequest = new XMLHttpRequest();
|
|
|
|
setImage("error");
|
|
|
|
this.open("GET", this.fileid + "/"+(jso.page+1));
|
|
|
|
|
|
|
|
this.addEventListener("load",ImageLoadCallback);
|
|
|
|
|
|
|
|
this.send();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else
|
|
|
|
else
|
|
|
|
{
|
|
|
|
{
|
|
|
|
var diff = ((new Date).getTime() - start)/1000;
|
|
|
|
if (jso.page !== jso.last)
|
|
|
|
console.log('Transfer done in ' + diff + 's');
|
|
|
|
{
|
|
|
|
|
|
|
|
// var secRequest = new XMLHttpRequest();
|
|
|
|
|
|
|
|
this.open("GET", this.fileid + "/"+(jso.page+1));
|
|
|
|
|
|
|
|
this.addEventListener("load",ImageLoadCallback);
|
|
|
|
|
|
|
|
this.send();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
else
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
var diff = ((new Date).getTime() - start)/1000;
|
|
|
|
|
|
|
|
console.log('Transfer done in ' + diff + 's');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
loadFromArrayBuffer(jso);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
loadFromArrayBuffer(jso);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function init(fileid) {
|
|
|
|
function init(fileid) {
|
|
|
|
start = (new Date).getTime();
|
|
|
|
start = (new Date).getTime();
|
|
|
|