Hardware, programming and astronomy tutorials and reviews.

Using web-based image editors with Django apps

Intergrating FotoFlexer, Picnik and Pixlr web based image editors with Django applications


fotoflexer.com is the first web image editor I'll describe. It offers a basic API, which can be used on websites. It works quite simple - we open the editor page passing in the URL (GET) link to the image and callback URLs that will be used when user saves or cancels changes. FotoFlexer offers a JavaScript library that helps opening the editor with all needed data. We can download it from the API page.

At start we create a simple, example view with a template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>FotoFlexer API Example</title>

	<script type="text/javascript">
	var ff_image_url;
	var ff_callback_url;
	var ff_cancel_url;
	var ff_lang;
	function ff_setup(img_src){	   
		ff_image_url = img_src;
        // callback for saving changes
		ff_callback_url = "http://localhost:8080/user/save_image/";
        // callback for cancel actions
		ff_cancel_url = "http://localhost:8080/";
		ff_lang = "en-US";
	<script type="text/javascript"
    <!-- example of opening the editor with onclick on IMG tag using ff_setup(URL) function -->
    <!-- via thumbnail -->
    <img src="http://www.yourpage.com/image_thumb.jpg" 
	    onclick="ff_setup(this.id)" />
	<!-- plain -->
	<img src="http://www.yourpage.com/image.jpg" onclick="ff_setup(this.src)" />
The example has few key elements When we click on a example image we will be redirected to the editor:
When we save the image the editor will redirect to ff_callback_url defined URL. FotoFlexer will pass through GET a temporary url to the edited image ("image" variable). We need to save it like so:
def save_image(request):
	if 'image' in request.GET:
		req = urllib2.Request(url=request.GET['image'])
		f = urllib2.urlopen(req)
		image = f.read()
		img = open(settings.MEDIA_ROOT + '/example.jpg', 'wb')
		return HttpResponse('<img src="/site_media/example.jpg" alt="" />')
	return HttpResponseRedirect('/')


picnik.com is another web based image editor. It has extensive API, but it requires registration and API Key. Editor has many options, including saving the image on your computer.
To save the image on our website we have to use the Export button, which may not be so obvious:
It works like FotoFlexer. We open the editor with data passed in the URL (GET), and on export it will redirect to the callback url with a temporary url in GET variables. It also can POST the file on the callback url. Here is simple GET example:


pixlr.com offers two editors - Pixlr Editor which is Photoshop-like and Pixlr Express, which is much simpler and easier to use. We have the API and examples.

Django web framework tutorials, 1 November 2010,

Comment article