Pixidou – an Open Source AJAX Image Editor (PHP and YUI based)

Pixidou is a new open source AJAX image editor which will allow you to :

  • adjust brightness
  • adjust contrast
  • cropping
  • flipping
  • negative
  • resizing
  • rotating
  • tint


What you need to get running

  • PHP5.2+ installed on your webserver
  • GD2
  • a web browser


Unzip/untar the software in your web directory and that’s all ;-)
Also ensure the images folder is writable by your webserver.
Have fun !!!

Get it and follow it at github

All the image manipulation is PHP-based with the help of the great class.upload.php class by Colin Verot which I highly recommend.

The frontend is the most interesting part, where I’ve use the one and only YUI library. Here are the component I used (served from Yahoo CDN) :

  • reset-fonts.css – for all resetting, style information
  • utilities – for all AJAX, animation, drag drop, event handling stuff
  • container – for all panels, dialogs, alerts
  • menu – for the top navigation menu together with the submenus
  • button – provides nice buttons
  • slider – for adjusting contrast and brightness
  • color picker – to choose the color to tint the image
  • resize – to resize the image
  • image cropper – image cropping utility
  • json – to parse all JSON data returned from PHP scripts
  • layout – the general layout
  • tabview – for the about information

I’ve not used the grids.css since it caused some problems while using the color picker.

It’s only the beginning of Pixidou and I’am currently looking for some collaborators. So, if you think you can give a helping hand in any way to Pixidou, don’t hesitate to contact me (asvin.balloo [@] gmail.com), I’ll happily add you as a contributor to the repository on github.

Since it’s an early version, there must be some bugs lying everywhere, don’t hesitate to drop me an email.

Be Sociable, Share!

12 thoughts on “Pixidou – an Open Source AJAX Image Editor (PHP and YUI based)”

  1. Would be nice with a shift+drag feature for the resize function to preserve image proportions when resizing.

  2. Where is the tar ball or zip file? It would help if the download link pointed to one file. IE wants to change the extension of every file and saves directories to html pages.

  3. Greetings All,

    I’m a newbie and need some help. I’d like to be able to pass an image url to pixidou editor from my javascript or php, and I’d like pixidou to display it in a div (or in a new browser window in case if div is not possible). Could anyone point me to a place where I can learn how to do about or simply could someone who has done this already can share al fragment of that code. Thanks in advance.

  4. Hey there,
    I’m aware the demo is down, But I had seen it work previously. I was wondering are the sourcefiles at to how the demo was setup (having an original file when you access the image editor.) I’d ideally like to have it as Garry said. ‘ pass an image url to the pixidou editor’ or even just the have someone point out the variable that contains the image once uploaded.

    i think it’s $uploadedImage from the code so far. But I haven’t been able to find any documentation on this. Any feedback would be great!

    Thanks in advance,

  5. I just tried installing it to see what it’s like, and I noticed that “horizontal flip” and “vertical flip” are inverted: a horizontal flip actually flips it vertically, and a vertical flip actually flips it horizontally.

  6. I fixed it by switching the two imagecopy lines in the flip function in class.upload.php as follows:

    // flip image
    if ($gd_version >= 2 && !empty($this->image_flip)) {
    $this->image_flip = strtolower($this->image_flip);
    $this->log .= ‘- flip image : ‘ . $this->image_flip . ”;
    $tmp = $this->imagecreatenew($this->image_dst_x, $this->image_dst_y);
    for ($x = 0; $x image_dst_x; $x++) {
    for ($y = 0; $y image_dst_y; $y++){
    if (strpos($this->image_flip, ‘v’) !== false) {
    imagecopy($tmp, $image_dst, $x, $this->image_dst_y – $y – 1, $x, $y, 1, 1);
    } else {
    imagecopy($tmp, $image_dst, $this->image_dst_x – $x – 1, $y, $x, $y, 1, 1);
    // we transfert tmp into image_dst
    $image_dst = $this->imagetransfer($tmp, $image_dst);

Comments are closed.