Using web-based image editors with Django apps

Check out the new site at https://rkblog.dev.

1 November 2010 Comments

FotoFlexer

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">
<head>
	<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";
		ff_activate();
	}
	</script>	
	
	<script type="text/javascript"
		src="http://fotoflexer.com/API/ff_api_v1_01.js">
	</script>
</head>
<body>
    <!-- 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" 
	    id="http://www.yourpage.com/image.jpg" 
	    onclick="ff_setup(this.id)" />
	
	<!-- plain -->
	<img src="http://www.yourpage.com/image.jpg" onclick="ff_setup(this.src)" />
    
</body>
</html>

The example has few key elements

API configuration - callback urls
Attaching JS library
Adding editor calls on selected images

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')
		img.write(image)
		img.close()
		return HttpResponse('<img src="/site_media/example.jpg" alt="" />')
		
	return HttpResponseRedirect('/')

Picnik

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:

We create a URL to the editor like so:
http://www.picnik.com/service/?_apikey=API_KEY&_import=IMAGE_URL&_export=CALLBACK_URL&_export_agent=browser
Such link will open up the editor. On "export" it will redirect to the callback URL with temporary image url under "file" variable.

Saving image is like for FotoFlexer:

def save_image(request):
	if 'file' in request.GET:
		req = urllib2.Request(url=request.GET['file'])
		f = urllib2.urlopen(req)
		image = f.read()
		
		img = open(settings.MEDIA_ROOT + '/example.jpg', 'wb')
		img.write(image)
		img.close()
		return HttpResponse('<img src="/site_media/example.jpg" alt="" />')
		
	return HttpResponseRedirect('/')

pixlr

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.

Download helper JS library and add it to the web page.

Using the JS function from the library we build the URL that will open the editor. We set image url, editor type and callback urls for save and cancel ("exit") actions:

<script type="text/javascript" src="/site_media/pixlr.js"></script> 
<a href="javascript:pixlr.edit({image:'IMAGE_URL', service:'express', target: 'CALLBACK_URL', exit: 'CALLBACK_URL'});">Open Editor</a>

service variable defines which editor to use - "express" or the advanced "editor"

On save we get the temporary image url in the GET variables:

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')
		img.write(image)
		img.close()
		return HttpResponse('<img src="/site_media/example.jpg" alt="" />')
		
	return HttpResponseRedirect('/')

RkBlog

Django web framework tutorials, 1 November 2010

Check out the new site at https://rkblog.dev.