next »

[inp o҉rtb]

[imagine-ng] [download legacy-imagine source]
please read the most recent posts for news

Imagine-ng is a simple photo editor. It's browser-based, AJAXy, and different.

Imagine-ng

To use the application:

• upload your image to an image host
• in Imagine-ng, click File > Import from URL... on the left
• paste the image URL into the form on the right and click submit

The panel on the left contains a menu of editing functions and the panel on the right contains the path editor; the workspace is in the middle.

What's the path editor?

Traditional image editors have a history feature that lets you rollback your changes. Imagine-ng abolished this feature in favor of a path-based rendering mechanism. Simply put, Imagine-ng executes arbitrary series of commands. You can use the path editor to modify the commands in the path, drag&drop-reorder the commands, and disable/enable specific commands. This powerful function completely blows history away and launches you into the future of image editing.

Caveats

• As with any decent online image editor, Imagine-ng requires a reasonably fast Internet connection.
• During development, few components are minified/compressed.
• Imagine-ng is not an image host. Images are removed after 6 hours of disuse.
• Images and intermediate states are accessible to the public until they expire.

Have fun!

[»Movids«]

I'm having fun with that tool right now. I uploaded a candid picture of my girlfriend sleeping and at first I clicked on the options on the left they didn't seem to work. But I gave it time and all went well.  I guess it's because the picture is slightly big ^.^

[npinc.ca]

I get a red x 

[inp o҉rtb]

Okay, now there's a nifty cropper widget... just click and drag on the picture! Holding [shift] while dragging has the expected effect...

It's good to see that the script is being used! Yes, it uses quite a bit of resources, which is why I intend to move it off 110mb.com when I've developed it enough. It does not touch MySQL, though, so it's good in that respect.

When you resize your pictures, you should see your browser give you a quick 'n dirty resize before the server's higher-quality version gets through. I'm also intending to implement layers and layer blending sometime, making this a rather shabby alternative to Photoshop, or something.

I'm using AJAX to do some asynchronous file upload thing, but this does not work on Safari/WinXP. If anyone knows of a neat Safari-friendly solution, please advise!

Thanks for checking out the script. Now I'm going to clean out the upload directory and go to lunch. Later!

I get a red x 

That is expected behavior. The image has an empty src attribute, and therefore cannot be displayed. You need to [load] something first. Somehow, I don't get the broken image mark in Firefox or Konqueror, only in MSIE6. I'm going to make it so that blank images are not displayed or something.

[MapleMario]

o_o that was pretty fun.

On a side note, how did you make the GUI for it?

[Slittzle]

I'm creating something like this currently, I've got a few more things built in besides cropping..I've got some hue stuff and I'm working on some filter effects. I'll show a demo when I can get something decent working.

[inp o҉rtb]

New GUI and Safari support! Come check it out! (But alas, I have decided to stop supporting IE6 and lower. Even if you're a Microsoft fanboy you should already have upgraded to IE7...)

Thanks everyone for trying my program. Please, do continue playing with it and tell me what you think!

@Slittzle: Good to see that someone else thinks that it's a good idea =p  Image editing has never been a browser's forte...

@MapleMario:
That old ugly gray GUI was done using CSS and Javascript. The new, colorful, curvy layout was similarly done...

[MapleMario]

Oooh. Like the new one. But it still could be better.

EDIT: You should add an undo function.

[inp o҉rtb]

You should add an undo function.

heh, I've thought about that. I'm going to implement this later on, maybe way later on... it will involve making snapshots of everything. Thanks for the suggestion.

### EDIT ###
Actually, that's not so hard. I'll probably get it done sooner than expected.

[aldo]

Oh wow Very nice Great Job. Seems like MS Paint though in a way but still Very Nice

[inp o҉rtb]

Thanks for the compliment. Though, unlike paint, this is not going to be used primarily for pixel-level work. I will add the undo function soon enough, so stay tuned! Meanwhile, if you're worried about messing up your work, there is a new preview function, so you can see in advance what's going to happen to your picture.

Brightness and contrast have been implemented, and they come with neat little sliders! Preview for these functions is automatically refreshed when you change the slider or the number in the box. Check it out!

I plan to allow multiple output formats, so as to allow for file conversion...

### EDIT ###
Wait no longer, because there is now a versatile UNDO function! None of your image's previous states are ever deleted, so as long as your browser is open, you can restore to any previous state. You can even roll back your restore operation! (exception: because this is not an image host, I do have to go in there once in a while to clean up the upload directory. but for all practical intents, you have no limits on your saved states.)

[rpalominos]

la página me cargó un tanto lenta 

no sé si será el código o qué cosa

[inp o҉rtb]

Ah, yes. I forgot to mention -- this code shuttles images back and forth, so you _will_ need a reasonably fast Internet connection to use the program!

[Piotr GRD]

Great tool. I'm impressed.

I know something like this - url: resize.it - but I think your will be better.

My suggestions: in "resize" add check box with "keep ratio"
also the specific sizes like 640x480, 800x600, 1024x768 etc.
and maybe percentage resizing.
You can add rotate / flip options.


But most of all:
Congratulations.

[inp o҉rtb]

Thanks, Piotr GRD. I've bookmarked that site; I'm going to be using it as a reference as to what needs to be implemented. I hope I'll make a better tool, and I guess it helps somewhat to not have to send your image up to the server for each operation.

Percentage resize and resize with aspect ratio are great ideas! I guess I'll make the PHP capable of handling percentages and add a bit of javascript to calculate the second dimension. I'd have 2 checkboxes, one for percentage, the other for ratio. In the future, I'll make it parse the % sign...

Rotate/flip is definitely on the agenda. While resize.it allows only orthogonal rotation, I aim to implement arbitrary rotation. Arbitrary flipping is a bit more difficult... hm... I think it involves a rotation and translation before and after the flip.

The main thing about resize.it is that it's easy and intuitive for people who are not too sharp in graphic design. I'd like to target that crowd too, so I think I'd better have some "wizards" too later on...

Anyway, I've posted a features page up at http://www.deviantart.com/deviation/58386871/

Thanks again for your encouragement and suggestions!

### EDIT ###
btw, any suggestions on how I might lower bandwidth usage? I don't think it's possible, because you have to refresh the image after every operation... and I'm not willing to settle for JPEG format either, because there's no transparency and whatnot, which I intend to implement...

[Piotr GRD]

btw, any suggestions on how I might lower bandwidth usage? I don't think it's possible, because you have to refresh the image after every operation... and I'm not willing to settle for JPEG format either, because there's no transparency and whatnot, which I intend to implement...

Maybe something like this:
if (image is smaller than reasonable size) { do what you do as usual; }
else if (image is big) { upload original to the server, work with original on the server, but send the semi-size preview to the browser and add "finish" button for download the image in original size; }

I don't know how to do that - this is just an idea what you can do.

[inp o҉rtb]

Hm, thanks, I'll keep that in mind. And I'll look for ways to crunch the PNGs more using PHP. There's no use sending a gzipped stream because PNG is already compressed to the max...

Now, I'm going to add a [publish] feature that lets you post your work online permanently. I know I can't store this on 110mb.com space, because it would constitute file storage or image hosting, but I _can_ POST the stuff to a third-party image host like imageshack.us. Would they mind if I did that? The link that I give the user would be the one with all the ads, so I don't think they would lose any revenue...

### EDIT ###
Imagine now has its own formal 110mb.com account! It's still at http://imagine.inportb.com/, but it's no longer a redirection.

### EDIT ###
I've wrapped up much of the core clientside logic into singleton objects. This should make it easier for me to manage the script. Images can now be rotated through arbitrary angles and flipped orthogonally. You can now pass images by URL, and there is a nice bookmarklet for you to lift images off websites. Finally, you can now publish your work to ImageShack! I'm going to work on the graphical buttons next, then add more publishers.

[MapleMario]

o_o wow, I am VERY impressed. Graphical buttons would make it uber. Keep up the great work.

You might also want to take a look at image manipulation tools such as Photoshop and GIMP and see what features they have.

Great work though.

[inp o҉rtb]

Thanks for your compliment. I'm actually working on the buttons now, though the graphics might not be active for a while. I'm going to fix up some nicer-looking text buttons for now. I'm thinking about implementing accordion-style menu folding, since the left-menu seems to be getting rather long...

Yes, I am using Photoshop for reference. Eventually, I intend to support layers and blending, though it's a lot of work to implement now. I'm also checking resize.it for features.

Again, thanks for checking out my program. I want to make this as easy to use and full-featured as possible =p

### EDIT ###
Oh, yes -- as stated by my modified opening post, images older than 6 hours are now automatically removed. These features are coming in super-fast! Though I may not have graphical buttons yet, here're some stylish text buttons for your enjoyment. Now then. I'm going to see if I can cook up some custom filters. They won't be nearly as fast/efficient as the built-in filters, but they'll add a lot of missing functionality.

[MapleMario]

Oooh like the new buttons.

But do you really need the

*: These work partially.
~: These don't work yet.

?


EDIT: You should add an option for how many pixels to blur on the Gaussian Blur.

EDIT 2: It's mainly just filters right now, maybe you should add a brush tool or a pencil tool? If it's a photo manipulator, it should have more options.