Ajax Feed Partner Bar ChartMaker: Ext 2 UI on top of the Google Chart API
Dec 19

Gears Future APIs: Image Manipulation API

Ajax, Gears, Google, Tech Add comments

I said in my recent post on Gears being about more than offline that I would talk about some fun future APIs.

The Gears project is open source, and is really being held out in the open, which means that you can check it out and contribute. We want Gears to be community open source, as opposed to just using open source as the way code gets out there. There is a big difference. Poke around the Wiki to see more.

Back to the API. The Image Manipulation API provides a way to manipulate images though client-side JavaScript:

This is a module to give Javascript a way to resize, crop and compose images together on the client side. This will allow, for example, images to be resized into a web-friendly format before being uploaded to a photo album. Another use is for composition of images together as an efficient alternative to server-side composition or CSS layering. Yet another use is for basic photo editing – a user can edit a photo with instantly applied changes before uploading it to the server.

The module is fairly simple, and has the following API:

var image = google.gears.factory.create('beta.image', '1.0');
void open(blob)
Blob blob(type)
void resize(width, height)
void crop(x, y, width, height)
int width()
int height()
void rotate(degrees)
void flipHorizontal()
void flipVertical()
void drawImage(image, x, y)
void close()

Having this functionality available natively in the browser would be very cool indeed, and could open up the doors for some interesting ideas.

Other Future APIs

Disclaimer: This is early days, and who knows what the final API will look like, and how far it goes. Do you have ideas for cool Gears that make the Web better? Let us know!.

UPDATE: Ray Cromwell of Timepedia thinks that we should be more ambitious. There are some great thoughts in there, and this is the type of feedback that we really look forward too. We haven’t even begun here, so feedback now will hope us having something a lot better when all is said and done..

10 Responses to “Gears Future APIs: Image Manipulation API”

  1. Tarique Sani Says:

    Cross Platform client side Image resizing is something that I have been dreaming of ever since We started the Coppermine Picture Gallery project – on high upload traffic sites server side resizing drives the server load to unacceptable levels even with small images. Being able to transfer this onus on to the client side will be a boon. I am sure the ability to automagically watermark pictures would be an added bonus

  2. Ray Cromwell Says:

    I believe the API would be more generally useful if it included affine transforms and ability to run filter kernels on Images. Crop and Resize I can do today with JS Canvas (except on IE). A huge range of photoshop-like image processing can be achieved if affine transforms, filter kernels, and lookup ops can be applied.

    Also, I’d add a method to turn the resultant image into a data: URL

    Personally, I’d like to see Gears supply this API along with a version of the WHATWG Canvas (+ transformed Text rendering), so that cross browser rendering would no longer require dealing with VML/SVG hacks, and instead you’d get an enhanced JS Canvas on Opera/IE/Firefox/Safari, with identical capability.


  3. Ray Cromwell Says:

    Oh, P.S., toss in perspective transform too to simulate 3D (Coverflow)


  4. Maciej Stachowiak Says:

    Why not base this API on Canvas from HTML5? I think Canvas already provides most of these capabilities natively in the browsers that support it (and could be extended to add anything that’s missing, but I don’t think there is).

    I understand that sometimes you need to go beyond standards to get the functionality you need, but in this case there’s already an appropriate standards-track API.

  5. Derek Says:

    very nice. if anyone is interested in an online web tool for image manipulation. check out http://www.vividtext.com – there is also a API there in the developers section.

  6. miranda Says:

    very good
    buy xanax

  7. Trevor Carpenter Says:


    Every few months or so I check to see if there is anything that can actually manipulate image RASTER values client side. I read the post from Ray Cromwell of Timepedia, this is how I ended up here.

    This would be the most basic functionality required in medical imaging applications. Changing contrast and windowing and adding look up tables (LUT) to apply colour maps to grey scale image data are absolutely fundamental and 90% of what raidiologist would want. Alpha channel compositions for overlays would be good also. Affine transforms etc would also be very useful but of secondary importance in this application.

    I have played with dojo, this uses svg and I can move a region of interest within the brain resize and make overlays on top of a base image pasted as the background to an element in the web page. But there is still no client side image raster thresholding or colour LUT. To achieve that I must re-thresold the image server side and resend it, it does not scale up with users or image size – on anything but the fastest intranet response can be disappointing. A tool kit in Gears sounds like the answer but I am not sure how you can access the image object clinet side (something I think Ray was talking about?)

    Please get intouch if there is any progress or if you think I can help in anyway to deliver this.


  8. wholesale replica handbags Says:

    thank you again

  9. Tom Says:

    Can gear manipulate color/pixels directly?

    plz reply to my e-mail.

  10. SBL Image manipulation Says:

    Great stuff!!

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: Type in the word 'cricket'