Thoughts on Image Processing in JavaScript?

#1

Post by ivankirigin » Thu, Aug 30, 2007, 4:37 PM UTC

I intend to work on javascript tools to do image processing at DevHouseBoston. http://devboston.pbwiki.com/Dev3Projects

The goals are to build an open framework, to learn more JavaScript, and eventually to implement that crazy dynamic image resize method that's been floating around the internet. http://www.faculty.idc.ac.il.nyud.net:8090/arik/IMRet-All.mo...

I thought I'd ask this group if they knew of any existing tools to use. A cursory google search found little.

This might be easier to do in Flash, but I want to learn more JavaScript and get the sense that it will be more portable this way. Any thoughts on this issue?

Re: Thoughts on Image Processing in JavaScript?

#2

Post by fauxto » Thu, Aug 30, 2007, 5:05 PM UTC

Image processing is not possible with JavaScript.

Re: Thoughts on Image Processing in JavaScript?

#3

Post by ivankirigin » Thu, Aug 30, 2007, 5:10 PM UTC

fauxto wrote: post #2

Image processing is not possible with JavaScript.

What do you mean not possible? You can't touch pixels in an image buffer?

Re: Thoughts on Image Processing in JavaScript?

#4

Post by ivankirigin » Thu, Aug 30, 2007, 7:13 PM UTC

I'm told they've filed a patent on the method they used. Often a component can be changed in the actual implementation to avoid infringement, but that means more work.

Also you can find a paper for the work here: http://www.faculty.idc.ac.il/arik/

Re: Thoughts on Image Processing in JavaScript?

#5

Post by fauxto » Thu, Aug 30, 2007, 8:22 PM UTC

ivankirigin wrote: post #3

fauxto wrote: post #2

Image processing is not possible with JavaScript.

What do you mean not possible? You can't touch pixels in an image buffer?

Is it possible that you are referring to Java rather than JavaScript?

Re: Thoughts on Image Processing in JavaScript?

#6

Post by henryw » Thu, Aug 30, 2007, 9:05 PM UTC

I don't know if you can actually modify the image, but you could do things like change image width and height properties, or use css in ways to show manipulated image.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> body { margin: 0 } http://particletree.com/scripts/prototype.js" type="text/javascript"> http://www.google.com/intl/en_ALL/images/logo.gif" id="image" style=" position:absolute; " />

var i = $('image'); var oldWidth = i.width ; var oldHeight = i.height ;

function resize1() { i.width = oldWidth + oldWidth ; i.height = oldHeight + oldHeight ; i.style.clip = 'auto'; if ($('image2')) {$('image2').remove();} }

You could use overflow:hidden instead of clipping. Then find the math formulas for the resizing, attach drag handler to image edges, overlay semi-transparent layers to emulate effects. To save it in the end though the user has to take a screenshot or your backend script has to process it for the user.

Re: Thoughts on Image Processing in JavaScript?

#7

Post by waleedka » Thu, Aug 30, 2007, 9:22 PM UTC

JavaScript 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 can get with JavaScript. Other options include using a JavaApplet that runs on the client, or a .NET component (IE on Win only).

Re: Thoughts on Image Processing in JavaScript?

#8

Post by ivankirigin » Thu, Aug 30, 2007, 10:22 PM UTC

waleedka wrote: post #7

JavaScript 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 version of the image, with whatever fancy resize is needed.

I'd like to avoid .NET and Applets. Flash might be a reasonable solution.

Re: Thoughts on Image Processing in JavaScript?

#9

Post by ivankirigin » Thu, Aug 30, 2007, 10:34 PM UTC

fauxto wrote: post #5

ivankirigin wrote: post #3

Earlier quoted context omitted.

What do you mean not possible? You can't touch pixels in an image buffer?

Is it possible that you are referring to Java rather than JavaScript?

No, I just didnt know before I asked whether browsers let JavaScript have access to the low level image information.

I mention below the best options: server side or flash.

Re: Thoughts on Image Processing in JavaScript?

#10

Post by alex_c » Fri, Aug 31, 2007, 12:35 AM UTC

My first instinct was "no", but then I remembered this:

http://www.abrahamjoffe.com.au/ben/canvascape/

I don't know what kind of image processing you want to do, but the demo above definitely pushes the boundaries of what I thought JavaScript can do. I haven't had the time to dig in and learn how it works.

Really simple stuff - moving, resizing, cropping - is trivial to do with JavaScript and server-side with something like ImageMagick.

No matter what, beware of IE6. I've only recently come to truly appreciate how slow and buggy it really is. No idea if IE7 is better. So I'll change my answer to "Maybe, but not in IE".