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

asvin — Fri, 31 Oct 2008 17:42:09 +0000

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

adjust brightness
adjust contrast
cropping
flipping
negative
resizing
rotating
tint

images.

What you need to get running

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

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

Download
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.

AJAX image cropper with YUI and PHP

asvin — Wed, 08 Oct 2008 11:01:55 +0000

This post will show you how to build an AJAX crop image tool using the image cropper control from YUI library and PHP.

The ImageCropper Control from the YUI library gives you an interactive interface for getting the dimensions to crop an image and using these dimensions in PHP, we can do some cropping.

The script we are going to build will

allow users to upload an image via AJAX
then allow them to select an area for cropping
lastly, provide a download link for the cropped image.

There are 3 files we are going to use

index.php – will contain the form for image upload as well as the cropping interface
upload.php – provides uploading functionality
crop.php – provides cropping functionality

From a technical point of view, the flow will be like this :

user uploads jpg image (index.php)
index.php then posts the image asynchronously to upload.php which will do the upload on the server, returning JSON data containing the image file name, its width and its height.
with the JSON data and innerHTML we put the image in our page
initialize the javascript cropping tool
generate a download link (crop.php)

Let’s have a look at index.php
The index.php is our main file where users will be able upload images and then download the cropped ones.

We’ll need the following components from the YUI library :

yahoo-dom-event.js – for DOM manipulation and Event handling
dragdrop – dependency for the image cropper control
element – dependency for the image cropper control
resize – dependency for the image cropper control
connection – for AJAX requests, in our case for image uploads via AJAX
json – for parsing JSON data
imagecropper – our most important control

Of course we’ll use Yahoo combo handling and add the js to our page along with the CSS needed for the above controls :

Next users must be able to upload images via AJAX, so we add a form to our page:


	Image :

We have an onclick event to the upload button to fire the uploading process.

// add listeners
YAHOO.util.Event.on('uploadButton', 'click', uploader.carry);

We’ll also need 2 containers :

imageContainer – will contain our uploaded image
downloadLink – will contain the download link

Both containers will be updated via innerHTML afterwards.

AJAX upload

For the AJAX upload, Code Central

has an excellent tutorial which I highly recommend. I took the code sample and modified it a bit to fit my needs. Finally I came up with a nice JSON object called uploader which has one method, carry. The latter just posts form data to a specified URL.

uploader = {
	carry: function(){
		// set form
		YAHOO.util.Connect.setForm('uploadForm', true);
		// upload image
		YAHOO.util.Connect.asyncRequest('POST', 'upload.php', {
			upload: function(o){
				// parse our json data
				var jsonData = YAHOO.lang.JSON.parse(o.responseText);

				// put image in our image container
				YAHOO.util.Dom.get('imageContainer').innerHTML = '';

				// init our photoshop
				photoshop.init(jsonData.image); 

				// get first cropped image
				photoshop.getCroppedImage();
			}
		});
	}
};

When upload is complete, we get the JSON data we mentioned earlier on. For e.g :

{"image" : "images/myimage.jpg", "width" : "500", "height" : 400}

With this data and using innerHTML we update our imageContainer div to put our image which will have yuiImg as id :

YAHOO.util.Dom.get('imageContainer').innerHTML = '';

It’s very important to specify the image width and height else the image cropper won’t work.
Next we initialize another JSON object, photoshop which we’ll have a look now.

Our photoshop object

photoshop = {
	image: null,
	crop: null,

	init: function(image){
		// set our image
		photoshop.image = image;

		// our image cropper from the uploaded image
		photoshop.crop = new YAHOO.widget.ImageCropper('yuiImg');
		photoshop.crop.on('moveEvent', function() {
			// get updated coordinates
			photoshop.getCroppedImage();
		});
	},

	getCroppedImage: function(){
		var coordinates = photoshop.getCoordinates();
		var url = 'crop.php?image=' + photoshop.image + '&cropStartX=' + coordinates.left +'&cropStartY=' + coordinates.top +'&cropWidth=' + coordinates.width +'&cropHeight=' + coordinates.height;
		YAHOO.util.Dom.get('downloadLink').innerHTML = 'download cropped image';		

	},

	getCoordinates: function(){
		return photoshop.crop.getCropCoords();
	}
};

The init function iniatializes the YUI image cropper from the uploaded image which has yuiImg as id.

photoshop.crop = new YAHOO.widget.ImageCropper('yuiImg');

We also subscribe to the moveEvent for the cropper since we’ll need to update the download link for the cropped image. So whenever the image cropper is moved/resized, we call the getCroppedImage function.

photoshop.crop.on('moveEvent', function() {
	// get updated coordinates
	photoshop.getCroppedImage();
});

The getCroppedImage function will generate the download link for the cropped image. To do image cropping in PHP we’ll need

the image we want to crop
the X,Y coordinates
height and width of the to be cropped area

Fortunately the YUI cropper utility has a function which will give us what we want, it’s the getCropCoords() method. So, whenever the getCroppedImage function is called, we get the coordinates of the cropped area, build a URL and finally put the download link in our downloadLink container.

// get coordinates
var coordinates = photoshop.getCoordinates();

// build our url
var url = 'crop.php?image=' + photoshop.image + '&cropStartX=' + coordinates.left +'&cropStartY=' + coordinates.top +'&cropWidth=' + coordinates.width +'&cropHeight=' + coordinates.height;

// put download link in our page
YAHOO.util.Dom.get('downloadLink').innerHTML = 'download cropped image';

This is all we need for the index page.

upload.php

if(!empty($_FILES["uploadImage"])) {
  	// get file name
	$filename = basename($_FILES['uploadImage']['name']);

	// get extension
  	$ext = substr($filename, strrpos($filename, '.') + 1);

  	// check for jpg only
  	if ($ext == "jpg") {
      		// generate unique file name
  		$newName = 'images/'.time().'.'.$ext;

  		// upload files
        	if ((move_uploaded_file($_FILES['uploadImage']['tmp_name'], $newName))) {

        		// get height and width for image uploaded
        		list($width, $height) = getimagesize($newName);

        		// return json data
           		echo '{"image" : "'.$newName.'", "height" : "'.$height.'", "width" : "'.$width.'" }';
        	}
        	else {
           		echo '{"error" : "An error occurred while moving the files"}';
        	}
  	}
  	else {
     		echo '{"error" : "Invalid image format"}';
  	}
}

The upload.php file too is self explanatory, we check for a jpg image only, then generate an unique filename, put it in the images folder and finally build json data which we’ll use for DOM manipulation. Of course the images folder must be writable by the web server.

crop.php

// get variables
$imgfile = $_GET['image'];
$cropStartX = $_GET['cropStartX'];
$cropStartY = $_GET['cropStartY'];
$cropW = $_GET['cropWidth'];
$cropH = $_GET['cropHeight'];

// Create two images
$origimg = imagecreatefromjpeg($imgfile);
$cropimg = imagecreatetruecolor($cropW,$cropH);

// Get the original size
list($width, $height) = getimagesize($imgfile);

// Crop
imagecopyresized($cropimg, $origimg, 0, 0, $cropStartX, $cropStartY, $width, $height, $width, $height);

// force download nes image
header("Content-type: image/jpeg");
header('Content-Disposition: attachment; filename="'.$imgfile.'"');
imagejpeg($cropimg);

// destroy the images
imagedestroy($cropimg);
imagedestroy($origimg);

Crop.php allows us to crop our uploaded image. First we get all the variables passed to us via the AJAX request,

// get variables
$imgfile = $_GET['image'];
$cropStartX = $_GET['cropStartX'];
$cropStartY = $_GET['cropStartY'];
$cropW = $_GET['cropWidth'];
$cropH = $_GET['cropHeight'];

Then we create 2 images, the original one and the cropped one, and use the imagecopyresized function to generate the cropped image. We add some header information to tell the world it’s an image and prompt for a save dialog.

f-lv.com – download YouTube videos in FLV/MP4/3GP format

asvin — Thu, 21 Aug 2008 11:02:15 +0000

After playing with the YouTube API and Python over the past week, I’am pleased to announce the launch of f-lv.com

You will be able to :

download your favorite YouTube videos in FLV/MP4 format
email the video download link to your friend
have a look at a nice carousel (thanks Bill for that) with the latest downloaded videos

Site is built in PHP5 with a tiny bit of Python for generating the link part, powered by the one and only YUI library for all AJAX stuff, dialogs, panels.

Latest update (22 August 2008):
Support for 3GP files has been added. Users can now download 3GP files which are perfect for their mobile phones.

The html blog » ajax

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

AJAX image cropper with YUI and PHP

AJAX upload

f-lv.com – download YouTube videos in FLV/MP4/3GP format