meltingice / CamanJS

Javascript HTML5 (Ca)nvas (Man)ipulation

Home Page:http://camanjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

bug: custom filter does not have access to positionXY, putPixel, etc

deanmalmgren opened this issue · comments

In trying to implement the filter I described in #132, I realized that I couldn't get any of the custom filters listed in the documentation to work. None of them have access to the positionXY, putPixel, etc methods that the documentation claims. To demonstrate the problem, I've put together a demo, the source code of which is available here.

Won't help you anymore, but I just noticed, having this problem myself, that Pixel.prototype does have those functions. So, in case you implement a Pixel-wise filter you can call those methods on the Pixel object handed to the filter (the rgba object). i.e.:

this.process("name", function (rgba) {
    if (rgba.locationXY().x === 0) {
        console.log("First row!")
    }
}

@mknecht thanks for posting what you learned. Even though its been a while I'd still love to get my little project off the ground and Caman seems to be the best tool out there for this sort of thing.

Your observation about the rgba object appears to fix the problem for the locationXY method inside of this.process, but I'm still unable to use the putPixel method which is actually the one I care about since I want to manipulate specific pixels to become transparent. I've updated my demo and corresponding source code to using what you suggest, but if you have any other pointers that would be extremely helpful.

At the very least, it appears that the documentation for custom filters could use a little patch, but I'm not convinced that that's whats causing the problem. @meltingice if you have any other ideas about what could be the issue, I'd definitely appreciate it!

To provide a few more details so you don't have to load the example page on your own, I'm using CAmanJS 4.1.2. When I run the exact same source code in the documentation page for a custom filter, but replace the this references to rgba pixel objects, I get the following traceback:

Uncaught ReferenceError: newLoc is not defined                           {{caman.full.min.js:141}}
Caman.Pixel.Pixel.putPixelRelative                                       {{caman.full.min.js:141}}
(anonymous function)                                                                 {{viz.js:13}}
Caman.Renderer.Renderer.renderBlock                                      {{caman.full.min.js:151}}
(anonymous function)                                                     {{caman.full.min.js:150}}

All I care about is using putPixel, so if I focus on just calling rgba.putPixel (in viz.js line 26), I get a traceback that looks like this:

Uncaught TypeError: undefined is not a function                          {{caman.full.min.js:144}}
Caman.Pixel.Pixel.putPixel                                               {{caman.full.min.js:144}}
(anonymous function)                                                                 {{viz.js:26}}
Caman.Renderer.Renderer.renderBlock                                      {{caman.full.min.js:151}}
(anonymous function)                                                     {{caman.full.min.js:150}}

Any ideas about what is going on here?

Had a look. Found two bugs.

  1. In Caman.Pixel.putPixelRelative the variable newLoc is sometimes misspelled as nowLoc.
    https://github.com/meltingice/CamanJS/blob/master/src/core/pixel.coffee#L57
  2. Several methods of Caman.Pixel call coordinatesToLocation and locationToCoordinates on this. Unfortunately, they're not defined as methods (on the prototype), but on the class (constructor function): https://github.com/meltingice/CamanJS/blob/master/src/core/pixel.coffee#L3

I changed your gist to monkey-patch the errors out.
http://bl.ocks.org/mknecht/b230c0a41a78a618021a

I'd create a pull request, but the project seems very dormant (open, unanswered issues aplenty and unmerged pull requests). Fork or monkey-patch: your choice. :)

@mknecht thanks for posting those issues and also for the 🐵. I uncovered some additional problems with the package—even after applying your monkey patches—that have got me started in a different direction. In case this project emerges from hibernation, I noticed that:

  1. putPixelRelative does not work when you use horiz=0 and vert=0. This is really strange and I suspect has something to do with the render implementation.
  2. putPixelRelative does not work properly when you use horiz=1 and vert=0 or horiz=-1 and vert=0. In these circumstances, you would expect to change everything but the left or right strip of pixels on an image, but this appears to do something else...
  3. putPixel does not work at all. I even tried to monkey patch this too but ran out of patience.

If others pick up this project and start running with it, I'd be happy to elaborate further and try to help, but I thought I'd put this here really quickly so I don't forget.

Just starting to play around with Caman, and it looks like some of these same issues exist today. Is there another package that exists that is good for allowing 1) loading of jpg, 2) doing pixel by pixel manipulation of the image, and 3) saving it back out? I was using lwip before, but it is a little cumbersome (i.e. I have to write wrappers for handling doing full image pixel manipulation, and there are no presets).

Same issue. Feeling bad when example ('example' filter!) of main documentation doesn't work!

Uncaught ReferenceError: newLoc is not defined at PixelInfo.putPixelRelative (caman.full.min.js:108) at PixelInfo.<anonymous> (main.js:42) at Renderer.Caman.Renderer.Renderer.renderBlock (caman.full.min.js:115) at caman.full.min.js:114

Any solution?