Uncategorized

Jqmagick Lite (Images and Media)

By Acty, October 2, 2013

JqMagick lite

An image manipulation webservice

JqMagick is a web-based Imagemagick application with an interactive Jquery/PHP/CSS front end which allows users to upload images (be it JPG, GIF, BMP, TGA, etc) so they can apply filters and change their values using UI elements, producing a result in real time. Besides being able to apply filters over filters, revert to the original image or simply jumping to a previous filter, users can export the image in numerous formats and share it using the social network function.
In the near future, we hope to bring you new filters which will be sold on the marketplace so feel free to rate and comment if you want more amazing filters such as Sketch, Tri-colorize, Tiltshift or 3D transformation.

Requirements

A server running PHP 5 with Imagemagick 6+. Php, jquery, server configuration and imagemagick knowledge is a plus.

JqMagick lite Features

  • Bundled with 30 ready to use filters
    Ranging from motion blur, swirl, threshold, rounded frame to oil painting, saturation and HCL, Jqmagick lite has all the “basic” filters your users are craving for.
  • Upload and export supporting 30 image formats
    You can upload and export image files which format is supported by Imagemagick, be it TIF, TGA, BMP, PCX, OTB, SVG, etc.
  • Apply and undo filters using Jquery UI
    Each filters comes with a pannel that features all the values that can be modified and undoing an action has never been so easy, plus the history pannel lets you jump to previous results easily.
  • Scalable filters architecture
    Filters can be added or deleted easily, you just need to upload them in the category folder or delete them. You can create your own filters if you are fluent with Imagemagick, php and Jquery, or buy extra filters which will be sold on the marketplace real soon.
  • No database required
    Everything runs without a database and uses Glob to create the list of filters.
  • Advertising block
    A 300×250 space is ready to use to display ads. Just set it’s display to “none” is you don’t want it to show.
  • Dedicated and Shared hosting friendly
    While we strongly recommend using a dedicated host, we provide you with a shared host version which has been tested on Godaddy. Please be aware that since hosts can change the version of Imagemagick at will, we may not be able to provide support for the “shared hosting” version.
  • And many more… check the demo (or the video) to find out

List of filters by category

  • Blur
    Motion blur, rotationnal blur, simple blur
  • Color
    Duocolorize, saturation
  • Edge
    Basic, highpass, laplacian
  • Effects
    Crazing, emboss, oil, rotascope
  • Frames
    Matte, rounded
  • Geometry
    Chop, deskew, resize, shave
  • Noise
    Noise
  • Sharpen
    Unsharp
  • Threshold
    Black, monochrome, threshold, white
  • Tone
    HCL, negate
  • Warp
    Arc, barrel, explode, swirl

How Jqmagick works

Here is a simple layout of how Jqmagick works (default configuration) :

  • The user clicks on the upload button, uploads an image from his computer (which is stored in the uploads/ folder) and then clicks on the “click to use” button.
  • The index.php file is called with GET using the image path (index.php?id=uploads/theimage.jpg).
  • The image is resized and displayed in a central div which max-width is set to 400px and the path of the resized image (in the output/folder) is stored in variables.
  • The Filters (js, css, php and png ressources) are loaded using GLOB.
  • The preview pannel displays the resized image and the histogram pannels processes the resized image in order to display the histogram.
  • Once the user clicks on a filter (icon), it’s relative pannel shows up and either waits for the user to change a value, or processes the image right away.
  • Each time a value changes, the script.php file is called and processes the image using the id of the filter and the values. The image is displayed, the histogram and the preview pannels are updated. Since the image has changed, the save and share icons can now be used and two new pannels appear : the history pannel and the actions pannel.
  • The history pannel first creates a text file using a unique session id and stores all the generated images, so that a user can click on a thumbnails and go back to that state. The trash bin icon allows the user to empty the directory.
  • The action pannel allows the user either to revert the image to its original state, or to apply the actual filter. By applying the filter, the user can then add another filter on the newly changed image (and not the original).

Sources

The following files were either used or studied to build JqMagick lite :

Support

Feel free to email us if you have any issue with Jqmagick lite, and send us as much information as possible (server & IM version information, errors, url) and specify wether you bought the regular or extended version.

2013 – Fred Weinhaus and Audibert jd.