I'm trying to create an in-browser image editor for simple effects,
but I seem to have hit a brick wall when it comes to getting the data
back.
The new Gears Canvas API is useful but too limited so I'm trying to
use the HTML Canvas, which allows for per-pixel image manipultion,
rotation, drawing, and special effects like rounded corners and drop
shadows.
To achieve this, I am using Desktop to open a local image file and
retrieve the Blob, which is then saved in a LocalServer store. I
create an IMG element and set its src to the Blob I just loaded, then
use that IMG element to load the image into my Canvas (using
canvas.getContext('2d').drawImage()).
This works great, and I can then display & manipulate the image in the
HTML Canvas.
The problem is I need to get the data back into a Blob so I can save
the data back to a LocalServer store, or load it back into the Gears
canvas, from which I can extract the Blob (via encode()) as a quality
JPG or PNG and send that to the server.
I would have thought this possible but I'm stumped. While I can pull
the pixel data out of the Canvas with getImageData() I can't turn push
this into the Gears Canvas. And I can get the data without lossy
compression using canvas.toDataUrl('image/png') but then I end up with
a base64 data: url which I can't do anything with.
I don't seem to be able to get the LocalServer to read the URL
(because it doesn't originate at the same domain). Alternatively, I
should be able to a httprequest and 'get' the data URL, then read the
responseBlob property of the httprequest object. That fails for the
same reason (domain).
Shouldn't Gears not block data: urls with the domain-origin rules?
after all there is no domain.
And failing this, does anybody know how I can overcome this last step?
It seems really simple, there has to be something I'm missing that I
can do to make this work.
thanks,
Jed.
