aurbano / nuophoto

:camera: Web based image editor

A JavaScript/HTML5 canvas image editor

Currently working on version 2 - With Angular, bootstrap, and much better practices

Nuophoto is basically a web interface that aims to show the capabilities of JavaScript as a photo editing software. The photo editing part is done with the library PhotoJShop.

Nuophoto and PhotoJShop started as the same project, but I realised that they should be developed independently, to provide image editing functions in JS without the need to load all the interface code in Nuophoto.

Demo:

Still in alpha stage of development. If you want to test the latest build check out:

• https://aurbano.github.io/nuophoto

Compatibility:

nuophoto is using some CSS3 and HTML5 things that only updated browsers support. I haven't run very specific tests (if you do please let me know) but so far I have detected the following:

• Blending modes: Chrome and Firefox, iOS Safari

How it works

It consists of different parts that are completely independent (modular). First it's the GUI, without any logic. It's all hard coded inside index.html. The interface event listeners are in main.js, which is kind of the conductor, it sets up the listeners, starts all the necessary components, but still doesn't know how to do anything by itself really. Above that sits workspace.js, which has all the GUI logic. All the event listeners call methods on this "class" and it handles all the visual requirements. When the user triggers an event that implies changes in the image, the last piece comes in place: imgEditor.js. This is the underlying library that handles the image manipulation, and there is one instance for every open file. The effects are dynamically loaded when they are required, and they live in the effects/ folder. All the effects receive a reference to the corresponding imgEditor instance, so that they are able to access and modify the image.

imgEditor should be completely unaware of the existance of the other layers, it's job is to modify the image and nothing else. It should work fine as a standalone library (Although it would probably require some tweaking)

Contribute

If you want to contribute please feel free to do so, below are some ideas I have for future development:

• Responsive design
• Touch controls
• Custom matrix effects (Maybe even store in local memory)
• Upload/load from url
• Allow history traversal (moving back and forth)

Meta

• Developed by Alejandro U. Alvarez
• Licensed under the MIT License
• Contributors: -

nuophoto's Issues

Blending modes

Allow users to change blending modes between layers

History traversal

Enable moving back and forth through the history

Layer opacity

Custom opacity for each layer, related to Blending modes issue

Color effect require radius parameter

I've been testing nuophoto and have found out,
that if you choose color effect,
then remove created layer,
choose artistic and remove created layer,
and then try to choose color effect,
you will be prompted to choose parameter like radius or brush size (which color effect doesn't require),
and after applying it will create layer with last chosen artistic effect.

Selections

Apply effects only to custom areas. Maybe even support polygonal regions

Load from URL/Computer

Sometimes effects get stuck

After applying several effects, and usually after changing file, the last effect is applied when selecting another one.

add the ability to easily import icons from user-created gallery

I think this would be extremely useful.

Layer visibility

Allow hiding/showing layers

Filter options/config

Display a window with configuration options for the selected filter (e.g. blur radius)

This depends on PhotoJShop development, which doesn't support effect configuration at the moment.