GeeCON Prague 2014*
The moose likes HTML, CSS and JavaScript and the fly likes Image Processing with HTML 5 Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Image Processing with HTML 5" Watch "Image Processing with HTML 5" New topic
Author

Image Processing with HTML 5

Kavisha Paranamana
Greenhorn

Joined: Jul 30, 2011
Posts: 25
I wonder what are the possibilities to have some sort of image processing done in HTML5/JavaScript. I know that most of the image processing stuffs are resource-intensive, and better to be done in the client side. But what are the possibilities, if we consider the bandwidth aspects? How about something like this: we need some information of color usage and edges data of an image composed by the user. I think that if we upload the whole image to the server just to get only the needed data, it will not be cost-effective with the bandwidth aspects. Instead, is there any possibilities to have some sort of image processing done in the client side, and send only the retrieved data to the server?

Kavisha Paranamana - Homepage
Pete Nelson
Ranch Hand

Joined: Aug 30, 2010
Posts: 147

The possibilities for HTML 5 to do this are pretty huge ... it's just a question of how the browser supports it.

The canvas element in HTML 5 is probably just what you are looking for.


OCPJP
In preparing for battle I have always found that plans are useless, but planning is indispensable. -- Dwight D. Eisenhower
Kavisha Paranamana
Greenhorn

Joined: Jul 30, 2011
Posts: 25
Thanks Pete; and yes, canvas seems to be the place to start.
But is there a way for identifying the existing points of a drawn image on a canvas, so we can use them for some sort of image processing with JavaScripts?
James Williams
author
Ranch Hand

Joined: Apr 18, 2009
Posts: 35
You can do some pixel manipulation at the canvas level on RGBA values I believe, you can also do processing with WebGL shaders, there's a project called glfx.js that uses WebGL shaders to create various effects. http://evanw.github.com/glfx.js/
 
GeeCON Prague 2014
 
subject: Image Processing with HTML 5