Browse files

Preliminary, fragile multi-filter support

  • Loading branch information...
1 parent a9f9d6e commit e8f14957d8e67f79ba633d377c40eb0730773776 Dave Shea committed Aug 23, 2010
Showing with 17 additions and 15 deletions.
  1. +17 −15 paintbrush-0.1.js
View
32 paintbrush-0.1.js
@@ -22,9 +22,12 @@ addLoadEvent(function() {
// you can add or remove lines here, depending on which filters you're using.
addFilter("filter-blur");
addFilter("filter-greyscale");
- addFilter("filter-noise");
addFilter("filter-sepia");
addFilter("filter-tint");
+
+ // if noise comes last, it seems all combinations work. if it doesn't, others fail. I don't get why.
+ // (try placing this above the others and check the torture test; sepia, tint and greyscale fail.)
+ addFilter("filter-noise");
}
});
@@ -49,15 +52,7 @@ function addFilter(filterType) {
var img = getReferenceImage(toFilter[current]);
// make sure we've actually got something to work with
- if (img.width) {
- processFilters(filterType, img, params, current, toFilter);
- } else {
- // otherwise, wait till the img loads before processing
- // (what happens if the img never loads?
- // jury's still out, but it shouldn't be too harmful if the event never fires)
- img.onLoad = processFilters(filterType, img, params, current, toFilter);
- }
-
+ img.onLoad = processFilters(filterType, img, params, current, toFilter);
}
@@ -139,7 +134,6 @@ function addFilter(filterType) {
return false;
}
-
// re-draw manipulated pixels to the reference image, regardless whether it was an img element or some other element with a background image
function placeReferenceImage(ref, buffer) {
// dump the buffer as a DataURL
@@ -191,22 +185,31 @@ function addFilter(filterType) {
c.clearRect(0, 0, c.width, c.height);
// make sure we're drawing something
if (img.width > 0 && img.height > 0) {
+
+ console.log(img.width, img.height, c.width, c.height);
+
try {
// draw the image to buffer and load its pixels into an array
// (remove the last two arguments on this function if you choose not to
// respect width/height attributes and want the original image dimensions instead)
- c.drawImage(img, 0, 0, img.width, img.height);
+ c.drawImage(img, 0, 0, img.width , img.height);
return(c.getImageData(0, 0, c.width, c.height));
+
} catch(err) {
// it's kinda strange, I'm explicitly checking for width/height above, but some attempts
// throw an INDEX_SIZE_ERR as if I'm trying to draw a 0x0 or negative image, as per
// http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images
//
// AND YET, if I simply catch the exception, the filters render anyway and all is well.
// there must be a reason for this, I just don't know what it is yet.
- console.log(err);
+ //
+ // we also seem to get to this point when attempting to apply multiple filters on the same image
+ // (specifically: noise before anything else, if it goes after, all is well?!)
+ //
+ console.log("exception: " + err);
}
}
+
}
@@ -241,8 +244,7 @@ function addFilter(filterType) {
function applyFilters(filterType, params, pixels, index, thisPixel, dest) {
// speed up access
- var data = pixels.data,
- val;
+ var data = pixels.data, val;
// figure out which filter to apply, and do it
switch(filterType) {

0 comments on commit e8f1495

Please sign in to comment.