yetangitu/canvas-based-HTML5-Comic-Book-Reader
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

better file example

Browse source
This commit is contained in:
Bala Clark 2013-04-30 23:17:37 +02:00
parent 050d8c8277
commit 71aceb4ef0
1 changed files with 135 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

159
examples/file.html
View file

@ -1,3 +1,9 @@
<!--
TODO:
· Update ComicBook to allow pages to be added after the object is initialised.
This would allow us to start rendering the comic immediately instead of
having to wait for the complete archive to be extracted before rendering.
-->
<!DOCTYPE html>
<html>
<head>
@ -9,11 +15,14 @@
<script src="../lib/bitjs/io.js"></script>
<script src="../lib/bitjs/archive.js"></script>
<script src="../lib/ComicBook.min.js"></script>
<script src="../lib/ComicBook.js"></script>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/Aristo/css/Aristo/Aristo.css">
<link rel="stylesheet" href="../css/styles.css">
<style>
#filepicker {
margin: 10px;
}
.progress, .bar {
width: 200px;
height: 1em;
@ -23,18 +32,29 @@
border: solid 1px;
}
.bar {
background-color: gray;
width: 0;
background-color: gray;
}
#droptarget {
width: 100%;
height: 400px;
border: dashed 1px gray;
}
#droptarget.active {
border-style: solid;
}
</style>
</head>
<body>
<div id="filepicker" style="margin:10px">
<div id="filepicker">
<input type="file" id="open">
<div id="droptarget"></div>
<div id="progressbar" style="display:none">
opening...
opening <span id="filename"></span>...
<br>
<span class="progress"><span class="bar"></span></span>
</div>
@ -47,58 +67,139 @@
'use strict';
var pages = [], $progressbar = $('.bar');
var $droptarget = $('#droptarget');
var $progressbar = $('.bar');
bitjs.archive.Unrarrer.prototype.getScriptFileName = function() { return '/cbr/lib/bitjs/unrar.js' }
bitjs.archive.Unzipper.prototype.getScriptFileName = function() { return '/cbr/lib/bitjs/unzip.js' }
if (!$.isFunction(window.FileReader)) {
$('#filepicker').html("Your browser doesn't support the HTML5 FileReader API. <a href='http://browsehappy.com'>http://browsehappy.com</a>.");
return false;
}
$('#open').on('change', function () {
function extractImages(files, opts) {
var images = [];
var fr = new FileReader();
var file = this.files[0];
var archive_class = ({ cbz: 'Unzipper', cbr: 'Unrarrer' })[file.name.match(/\.(cbz|cbr)$/)[1]];
var file = files[0];
var re_file_ext = new RegExp(/\.([a-z]+)$/);
var archive_class = ({ cbz: 'Unzipper', cbr: 'Unrarrer' })[file.name.toLowerCase().match(re_file_ext)[1]];
var options = $.extend({
start: function () {},
extract: function (page_url) {},
progress: function (percent_complete) {},
finish: function (images) {},
}, opts);
$('#open').hide();
$('#progressbar').show();
if (!archive_class) {
alert('invalid file type, only cbz and cbr are supported.');
return false;
}
options.start(file);
fr.onload = function () {
var done = false;
var ua = new bitjs.archive[archive_class](this.result);
ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.PROGRESS, function (e) {
var progress = Math.floor(e.currentBytesUnarchived / e.totalUncompressedBytesInArchive * 100);
$progressbar.css('width', progress + '%');
if (progress == 100 && !done) {
drawBook(pages);
done = true;
}
});
var ua = new bitjs.archive[archive_class](this.result, '/cbr/lib/bitjs/');
ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.EXTRACT, function (e) {
if (e.unarchivedFile.filename.match(/jpg$/)) {
var url = window.URL.createObjectURL(new Blob([e.unarchivedFile.fileData], { type: 'image/jpeg' } ));
pages.push(url);
// $('body').append($('<image>').attr('src', url).css('width', '200px'));
var mimetype, blob, url;
var file_extension = e.unarchivedFile.filename.toLowerCase().match(re_file_ext)[1];
switch (file_extension) {
case 'jpg':
case 'jpeg':
mimetype = 'image/jpeg';
break;
case 'png':
mimetype = 'image/png';
break;
case 'gif':
mimetype = 'image/gif';
break;
default:
return false;
}
blob = new Blob([e.unarchivedFile.fileData], { type: mimetype });
url = window.URL.createObjectURL(blob);
images.push(url);
options.extract(url, blob);
});
ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.PROGRESS, function (e) {
options.progress(Math.floor(e.currentBytesUnarchived / e.totalUncompressedBytesInArchive * 100));
});
ua.addEventListener(bitjs.archive.UnarchiveEvent.Type.FINISH, function (e) {
options.finish(images);
});
ua.start();
};
fr.readAsArrayBuffer(file);
}
});
function openComicArchive(e) {
function drawBook(pages) {
var title;
var files = e.target.files || e.originalEvent.dataTransfer.files;
e.stopPropagation();
e.preventDefault();
extractImages(files, {
start: function (file) {
this.file = file;
$droptarget.hide();
$('#open').hide();
$('#filename').text(file.name);
$('#progressbar').show();
},
extract: function (url, blob) {
// $('body').append($('<img>').attr('src', url).css('width', '10px'));
// console.log(url, Math.floor(blob.size / 1024));
},
progress: function (percent_complete) {
$progressbar.css('width', percent_complete + '%');
},
finish: function (pages) {
var name = this.file.name.replace(/\.[a-z]+$/, '');
var id = encodeURIComponent(name.toLowerCase());
var book = new ComicBook('comic', pages);
document.title = name;
$('#filepicker').hide();
$('#comic').show();
book.draw();
$(window).resize(function(event) {
$(window).resize(function () {
book.draw();
});
}
});
}
$droptarget.on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
$(this).addClass('active');
});
$droptarget.on('dragleave', function (e) {
e.stopPropagation();
e.preventDefault();
$(this).removeClass('active');
});
$droptarget.on('drop', openComicArchive);
$('#open').on('change', openComicArchive);
}());
</script>