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

basic enhancements api implemented

Browse source
This commit is contained in:
Bala Clark 2010-07-15 09:40:02 +00:00
parent 5dc6f6ae89
commit 4150d83b3e
6 changed files with 684 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

59
lib/ComicBook.js
View file

@ -60,6 +60,7 @@ function ComicBook(id, srcs, opts) {
var loaded = 0; // the amount of images that have been loaded so far
var scale = 1; // page zoom scale, 1 = 100%
var enhancements = {};
/**
* Figure out the cursor position relative to the canvas.
@ -174,7 +175,7 @@ function ComicBook(id, srcs, opts) {
var page = pages[pointer];
var page2 = pages[pointer + 1];
if (typeof page !== "object") { throw "invalid page type '"+ typeof page +"'"; }
var width = page.width;
@ -243,12 +244,15 @@ function ComicBook(id, srcs, opts) {
page = tmpPage2;
page2 = tmpPage;
}
// draw the page(s)
context.drawImage(page, offsetW, offsetH, page_width, page_height);
if (options.displayMode === "double" && typeof page2 === "object") { context.drawImage(page2, page_width + offsetW, offsetH, page_width, page_height); }
Pixastic.process(canvas, "desaturate", {average : false});
// apply any image enhancements previously defined
$.each(enhancements, function(action, options) {
ComicBook.prototype.enhance[action](options);
});
};
/**
@ -275,8 +279,54 @@ function ComicBook(id, srcs, opts) {
}
};
/**
* Apply image enhancements to the canvas.
*
* Powered by the awesome Pixastic: http://www.pixastic.com/
*
* FIXME: page navigation breaks after enhancements are applied
* TODO: reset()
* TODO: allow multiple effects at once
*
* TODO: abstract this into an "Enhance" object, separate from ComicBook?
*/
ComicBook.prototype.enhance = {
reset: function () {},
brightness: function (options) {
// merge user options with defaults
var options = merge({ brightness: 0, contrast: 0 }, options);
// remember options for later
enhancements.brightness = options;
// run the enhancement
Pixastic.process(canvas, "brightness", {
brightness: options.brightness,
contrast: options.contrast,
legacy: true
});
},
desaturate: function () {
enhancements.desaturate = {};
Pixastic.process(canvas, "desaturate", { average : false });
},
sharpen: function (options) {
var options = merge({ amount: 0 }, options);
Pixastic.process(canvas, "sharpen", {
amount: options.amount
});
}
};
ComicBook.prototype.navigation = function (e) {
if (e.type === "click") {
var side = getCursorPosition(e);
@ -338,6 +388,7 @@ $(document).ready(function() {
book = new ComicBook("comic", pages, options);
book.draw();
//book.enhance.brightness({ brightness: 100 })
});
$(window).resize(function() {