Codecanyon sEditor - online image editor - PHOTOSHOP ONLINE

How to use it

After the image is loaded, using sEditor is very simple. Just choose one of the many effects, select part of image or whole image and press Apply effect button (left to the save button) in top menu and your effect will be applied.

Effects wont be applied on original image, unless you choose save->overwrite original option. Overwrite function is only enabled on relative paths:

../../my_image.jpg

and folder permission on that folder must be read and write(777).

Simple effects (from top menu) can be applied on circle or block selection. This means that effect you want to add over your image can be applied as a circle or as a block. To select circle or block press third or fourth button from the left in top menu.

Slider in right top corner is available for some effects and for some is not. Slider represent value used for that effect, sometime it can represent opacity, pixel size or font size based on selected effect. Bellow the slider is description what value slider will change for each selected effect.

How to add custom pointer, marker or frame

sEditor is very flexible when it comes to adding custom made border,frames, pointer, arrows and other effects with png images. Some png effects are placed bellow the editing image and are available by pressing on tabs: Frames, Badges or Arrows.

Frames, Badges and Arrows are names of folders which are holding png files. Therefore, if you want to add new group of your png effect, just create new folder under effect folder and place your transparent png files inside. After that you will have new option in menu bellow the editing image.

How to create png effect?

If you want to apply png effect on your image and allow users to change the color of the effect, png content must be black! In other case, create colored png like one under ?Badges

Requirements

This script require PHP 5.xxx and PHP GD library enabled (it is enabled by default on most servers)

If you want to use pixelate effect, you must have PHP 5.3 or above

How to install

Installation is simple and easy. This script is working only with images and there is not needed to install any database files.

Unpack the zip package into folder where you want to place sEditor.

Leave the folders structure intact, add the write permission to folder /temp

To use the script, point your internet browser to sEditor folder, and you are done.

How use it in my project

sEditor needs to have image URL passed in varible called: URL.

You can use index.php which has field to enter image URL or you can just pass your own URL to sEditor like this:

www.yourwebsite.com/sEditor.php?URL=www.yourwebsite.com/image_directory/MAG0416.jpg

For instance, you can add a link next to image on your site which can call the sEditor and allow your user or administrator to edit that specific image:

<a href="www.yourwebsite.com/PATH_TO_sEditor/sEditor.php?URL=www.yourwebsite.com/image_directory/IMAG0416.jpg">

<img src="www.yourwebsite.com/image_directory/IMAG0416.jpg" />

</a>

When the image is visible in sEdtior, you can start editing.

By working with image, original image wont be edited until you choose to save option from main menu.

Customize

In this sEditor demo all effects are available, but it is easy to disable some of the effects. For instance, if you want to allow the users to only apply pixelate effect, you will need to comment out couple of lines in settings file, one line for one effect (detailed description comes in help file).

If you want to allow your users to apply only specific set of png effects, delete all folders inside of effect folder and create your own folder containing your png effects.

CSS file is very well commented, and you will not have any problems to change the design.

If you have any other questions, be free to contact me via contact form on my profile, or place the comment.