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

basic local file opening example, now using bitjs

Browse source 
instead of zip.js for cbz & cbr support.
This commit is contained in:
Bala Clark 2013-03-26 21:41:43 +01:00
parent 291b1e411f
commit a21d7f2f4c
59 changed files with 2555 additions and 9042 deletions
Download patch file Download diff file Expand all files Collapse all files

79
examples/app.html
View file

@ -1,79 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>App</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="../lib/zip.js/zip.js"></script>
<script src="../lib/zip.js/zip-ext.js"></script>
<script src="../lib/zip.js/zip-fs.js"></script>
<script src="../lib/underscore.js"></script>
<script src="../lib/ComicBook.min.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">
</head>
<body>
<p id='zipstatus' style="margin:10px"></p>
<canvas id="comic"></canvas>
<script>
(function () {
'use strict';
var book, cbz_url = 'http://localhost/cbr/examples/goldenboy.cbz',
pages = [],
status = $('#zipstatus');
zip.workerScriptsPath = '/cbr/lib/zip.js/';
status.text('opening ' + cbz_url);
zip.createReader(new zip.HttpReader(cbz_url), function (zipReader) {
zipReader.getEntries(function (entries) {
var image_entries = [];
entries.forEach(function (entry, i) {
if (entry.filename.match(/\.(jpg|JPG)$/)) {
image_entries.push(entry);
}
});
image_entries.forEach(function (image_entry, i) {
image_entry.getData(new zip.BlobWriter('image/jpeg'), function (blob) {
status.text('getting page url ' + i);
pages.push({ index: i, url: window.URL.createObjectURL(blob) });
if (pages.length === image_entries.length) {
pages = _.sortBy(pages, function (page) {
return page.index;
});
status.remove();
drawBook(pages);
}
});
});
});
});
function drawBook(pages) {
var book = new ComicBook('comic', _.pluck(pages, 'url'));
book.draw();
$(window).resize(function(event) {
book.draw();
});
}
}());
</script>
</body>
</html>

106
examples/file.html Normal file
View file

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>App</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="../lib/bitjs/io.js"></script>
<script src="../lib/bitjs/archive.js"></script>
<script src="../lib/ComicBook.min.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>
.progress, .bar {
width: 200px;
height: 1em;
display: inline-block;
}
.progress {
border: solid 1px;
}
.bar {
background-color: gray;
width: 0;
}
</style>
</head>
<body>
<div id="filepicker" style="margin:10px">
<input type="file" id="open">
<div id="progressbar" style="display:none">
opening...
<br>
<span class="progress"><span class="bar"></span></span>
</div>
</div>
<canvas id="comic" style="display:none"></canvas>
<script>
(function () {
'use strict';
var pages = [], $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' }
$('#open').on('change', function () {
var fr = new FileReader();
var file = this.files[0];
var archive_class = ({ cbz: 'Unzipper', cbr: 'Unrarrer' })[file.name.match(/\.(cbz|cbr)$/)[1]];
$('#open').hide();
$('#progressbar').show();
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;
}
});
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'));
}
});
ua.start();
};
fr.readAsArrayBuffer(file);
});
function drawBook(pages) {
var book = new ComicBook('comic', pages);
$('#filepicker').hide();
$('#comic').show();
book.draw();
$(window).resize(function(event) {
book.draw();
});
}
}());
</script>
</body>
</html>