1

I'm working on an image editor and I have to create some pixel manipulation methods applied on RaphaelJS images. I am considering using Pixastic library for pixel manipulation.

The problem is the I cannot link RaphaelJS image to Pixastic since RaphaelJS creates a SVG element and Pixastic requires an 'img' tag.

I have tried something like this but with no success

img = r.image("Assets/test.jpg", 40, 40, 260, 150);
img.node=Pixastic.process(img.node, "desaturate");
Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Pasman
  • 445
  • 3
  • 14
  • Have you checked this: http://stackoverflow.com/questions/3975499/conversion-of-svg-to-jpeg/3976034#3976034 ? – Niloct Jul 25 '11 at 21:28
  • The thing is I need to be able to further use the raphael object for transformations (move, rotate, scale). So i'm looking for an inplace apply of pixastic filters – Pasman Jul 25 '11 at 21:30

2 Answers2

2

There's not really currently an easy way to do this. As mentioned already, in many browsers you can output to Canvas and then perform pixel-level transformations, but this transition from SVG to Canvas is destructive, as you have gone from a retained-mode context to an immediate-mode context, and you therefore lose all the niceties of the retained mode API, such as being able to register event listeners on individual shapes, or have a high-level API for transforming individual shapes (or groups of shapes).

However, if you don't need the element-level event handling, you might look into the dojox.gfx library, which provides a high-level, retained-mode, SVG-inspired API for drawing shapes, but also has a Canvas backend (VML and Silverlight too). I believe it is not possible to register event listeners on individual shapes when using the Canvas output, but you would be able to register an event handler on the root canvas element. It might be possible to then apply transformations with Pixtastic, but you might need to hack into the dojox.gfx Canvas render code a bit.

You might also look into SVG filters, which is as close to native support for pixel-level, raster graphics-style manipulation as it gets with SVG.

I also believe they're currently trying to combine the two specifications somewhat to make such work possible: http://lists.w3.org/Archives/Public/public-canvas-api/2011AprJun/0117.html

jbeard4
  • 12,664
  • 4
  • 57
  • 67
  • to bad i'm way ahead into the project to switch from raphael. On the other hand you mentioned SVG filters, i need to do the following on pixel level: image bending, image skewing, specific color removal and color overlay. You think it's possible? – Pasman Jul 26 '11 at 12:25
  • Image skewing sounds like it could be expressed with a transform. Image bending probably isn't possible. Color removal and color overlay is probably possible using feColorMatrix. See here for docs: http://www.w3.org/TR/SVG11/filters.html – jbeard4 Jul 26 '11 at 21:16
  • 1
    Keep in mind, cross-browser support for SVG filters is pretty bad. I think only FF and Opera have reasonably good support. Chrome, Safari, and IE9, last I checked, do not support filters. – jbeard4 Jul 26 '11 at 21:17
  • I'm currently using a mixed solution between SVG and canvas directly and it works ok. The application is a port of an actionscript app to be used exclusively on webkit for non-flash supporting devices (ipad, iphone, android <2.2) – Pasman Jul 29 '11 at 19:32
1

You could try drawing the svg to a canvas element check near the end of this article https://developer.mozilla.org/en/drawing_graphics_with_canvas. Then outputting the canvas to a base 64 encoded image. Not having worked with either RaphaelJS or pixastic I am not sure how well this would work.

qw3n
  • 6,236
  • 6
  • 33
  • 62