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>
- API configuration - callback urls
- Attaching JS library
- Adding editor calls on selected images

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.

- 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
Check out the new site at https://rkblog.dev.
Comment article