Image processing is not possible with JavaScript.
Correction: JavaScript embedded in web pages cannot process images. Mozilla Rhino most certainly can, and I'm pretty sure Mozilla SpiderMonkey can as well if given XPConnect (or similar).
Thoughts on Image Processing in JavaScript?
11–15 of 15 posts
Re: Thoughts on Image Processing in JavaScript?
#12JavaScript in a browser doesn't give you enough low-level access to manipulate images. A good compromise is to build the UI in javascript, and have the image processing on the server. Then, use AJAX to give the user a nice and quick experience that feels as if the processing is happening on the client. Of course, you won't have as dynamic a behavior as if it's all on the client, but that's probably the closest you ca…
Right, I've been told a number of times now that I can't get access to the image buffer in JavaScript. That's too bad. I don't believe it can be made asynchronous and real-time. I suppose JavaScript could be used to control which resize scheme is used. While the bounds are changing, just scale and warp the image as a browser would today to make it fit a size. Once it stops changing, do an asych call to get a resized…
I think you're right. I think the options for image processing on the client side are currently limited to VML ( http://en.wikipedia.org/wiki/Vml ) for IE or for Safari/Firefox/Opera, SVG or Canvas ( http://en.wikipedia.org/wiki/Canvas_(HTML_element) ) and from the little bit of tinkering I've done with both, I don't think you can read the values of pixels of image buffers with any of those options. If anyone can disprove this I'd be very glad to hear it. You can with Flash or Java applets but both of those ideas have other problems as well.
It certainly would be useful if it were possible.
I've also been trying to figure out how to control a scanner from in the browser. I'd like to have something on a page which would scan a document, display the image in the browser, and upload it to a server. I was hoping I could do it with Flash, because Flash does have a TWAIN interface, but I've not been able to get Flash to recognize scanner devices, only cameras. I'm starting to think applets may be the answer to that, but that seems like a long road to start on.
Does anyone have any ideas about controlling scanners within browsers?
Re: Thoughts on Image Processing in JavaScript?
#13Hey Ivan, JS is a seriously crippled language when it comes to doing low-level processing. Like others have mentioned, cropping and resizing are trivial; however, to do anything even slightly sophisticated I'd suggest looking into flash.
Flash 8's image API -- specifically the BitmapData class -- can provide some low-level access to an image buffer (however the image must be round-tripped from localhost to the server if you want to edit local images).
Alternatively, IE provides some proprietary image filters which can be used to process images (but obviously not in a cross-browser way).
Re: Thoughts on Image Processing in JavaScript?
#14Hey Ivan, JS is a seriously crippled language when it comes to doing low-level processing. Like others have mentioned, cropping and resizing are trivial; however, to do anything even slightly sophisticated I'd suggest looking into flash. Flash 8's image API -- specifically the BitmapData class -- can provide some low-level access to an image buffer (however the image must be round-tripped from localhost to the server…
Ok, to counter my bummer parent post here are some things you COULD feasibly implement in javascript:
- color tinting (overlay semi-transparent colored elements on an image)
- image cut-and-paste (like cropping, place some bounded area of an image in a div with hidden overflow [the copy] and allow that to then be placed over the original image [the paste])
- image gradients, drop shadows, reflections (but these have been done to death and are usually too sluggish to use in a production app)
- some neat UI tricks like scroll wheel zooming and gesture-based panning (mootools has some demos which show what's possible - demos.mootools.net)
- if you really wanted to kill yourself, you could use flash (degrade to a server-side script) to build a pixel by pixel representation of the image using floated divs and background colors. Then create a JS singleton with your desired methods to be the image buffer's API. Thus, you're granted pixel-level access to the image and could (slowly) do whatever sort of processing you desire in JS.
Re: Thoughts on Image Processing in JavaScript?
#15Hey Ivan, JS is a seriously crippled language when it comes to doing low-level processing. Like others have mentioned, cropping and resizing are trivial; however, to do anything even slightly sophisticated I'd suggest looking into flash. Flash 8's image API -- specifically the BitmapData class -- can provide some low-level access to an image buffer (however the image must be round-tripped from localhost to the server…
Ok, to counter my bummer parent post here are some things you COULD feasibly implement in javascript: - color tinting (overlay semi-transparent colored elements on an image) - image cut-and-paste (like cropping, place some bounded area of an image in a div with hidden overflow [the copy] and allow that to then be placed over the original image [the paste]) - image gradients, drop shadows, reflections (but these have…
Wow. Those options are bleak. I'd certainly learn more JS in the process, but it wouldn't be reusable or scalable.