Load and edit images right from a website using this new tool from 27Developer.com. This Online Image Editor allows users to load images and manipulate brightness, color, saturation, plus many more levels and filters. This application also resizes, rotates, flips, and adds borders to images. Images can be encoded then saved or emailed in either JPG or PNG formats. All styles and settings are completely customizable via CSS and XML files.
- Reusable Image Manipulator Class
› Modifies image bitmap data by simply changing the individual properties listed below:
› Blur Filter
› Border around Image
› Brightness Filter
› Color Filters (RGB Channels)
› Contrast Filter
› Flip or Mirror Image
› Hue Filter
› Rotate Image
› Saturation Filter
› Sepia Filter
› Scale or Resize Image
› Sharpen Filter
- Load GIF , JPG, or PNG Image Files
› Load images directly to application, no server needed
› NEW – Load images remotely by entering a URL (server and PHP Required)
› Shows name, size, and dimensions of loaded file
- Save Images
› Save image as JPG or PNG
› Option to preview encoded JPG image quality at various levels
- Email Image (Server and PHP Required)
› Application can send HTML emails with images shown inline
- Image Viewer
› Grab and Drag or Auto-Scroll via mouse position
- Editable Language File
› Translating application to another language is easily done via XML
- Customizable Menu Styles
› Change colors, fonts, buttons, etc via an easy to edit CSS file
- Menu Settings are customized via XML
› See all XML settings below
- FlashVars that Point to all External Files
› Styles (CSS)
› Sample Image
› Language (XML)
› Settings (XML)
- Full Screen Mode via Right Click Menu Option
- Real-Time Image Editing (Client-Side Processing)
Customize the Application:
Using a simple CSS file you may change the look of the menu used in the application. Modify borders, buttons, colors, fonts, plus much more. Add a border around the menu or use the bevel filter shown in preview. It’s all customizable via the CSS file. An alternative CSS file is included to show how the menu may look using different styles. If you need help modifying path data that represents the shape of icons in these CSS files feel free to use my free Path Generator Application found here.
Saving and Emailing Images:
Images are saved directly to the user’s computer or can be emailed. Emails are HTML based with the image shown inline in the email. Users just enter an email address and if it passes email validation the email is sent via PHP , which is required to use this feature.
All text used in application is loaded via an XML file. You may change the words or translate them to any language to fit your needs. The email reply address, subject, and message are also included in this file.
Below are the settings straight from the XML file used for this application.
<!-- Auto-Scroll check box default selection (on or off) --> <autoScrollDefault>off</autoScrollDefault> <!-- The delay of the menu closing when user mouses away from menu (milliseconds) --> <closeDelay>1000</closeDelay> <!-- The padding between components (0 - 20) --> <componentPadding>5</componentPadding> <!-- Default Background Color of image/application (hex color) --> <defaultBackgroundColor>0xCCCCCC</defaultBackgroundColor> <!-- Keep Menu On Top of Image check box default selection (on or off) --> <keepMenuOnTopDefault>off</keepMenuOnTopDefault> <!-- Maximum border size (1 - 30) --> <maxBorderSize>10</maxBorderSize> <!-- How long the menu takes to open or close (milliseconds) --> <menuTweenDuration>1000</menuTweenDuration> <!-- The easer functions to use for menu animations (bounce, cubic, elastic, or quadratic) --> <menuTweenCloseEaser>quadratic</menuTweenCloseEaser> <menuTweenOpenEaser>bounce</menuTweenOpenEaser> <!-- The menu is vertically centered at 1, decrease this to move menu upwards (0 - 1) --> <menuVerticalAlignment>0.5</menuVerticalAlignment> <!-- Start application with menu pinned (yes or no) --> <pinMenu>yes</pinMenu> <!-- Resize Number and Slider step increment (1 - 20) --> <resizeNumberStep>1</resizeNumberStep> <resizeSliderStep>5</resizeSliderStep> <!-- The rotate button icon effect when pressed (on or off) --> <rotateButtonIconEffect>on</rotateButtonIconEffect> <!-- How long the load and save image menu takes to open or close (milliseconds) --> <saveMenuTweenDuration>1000</saveMenuTweenDuration>
If you require any custom work done on this or any of my applications, feel free to get in contact with me. You can either contact me through my profile here on ActiveDen or through my website at 27Developer.com.