Integracja edytorów grafiki z aplikacjami Django

1 November 2010 Comments

FotoFlexer

fotoflexer.com to pierwszy webowy edytor grafiki jakim się zajmiemy. Oferuje on proste API do integracji edytora z naszymi stronami. Działanie jest bardzo proste - otwieramy stronę z edytorem podając w parametrach GET linku adres URL do grafiki oraz adres zwrotny, który odbierze edytowany plik graficzny. Fotoflexer oferuje dodatkowo bibliotekę JavaScript, która zajmuje się otwieraniem edytora np. po kliknięciu na grafikę wstawioną na stronie.

Na początek potrzebujemy prosty szablon/widok wyświetlający grafikę do edycji, oto przykładowy szablon:

<!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;
        // adres przekierowania po zapisaniu zmian
		ff_callback_url = "http://localhost:8080/user/save_image/";
        // adres przekierowania przy anulowaniu zmian
		ff_cancel_url = "http://localhost:8080/";
		ff_lang = "en-US"; // pl-PL
		ff_activate();
	}
	</script>	
	
	<script type="text/javascript"
		src="http://fotoflexer.com/API/ff_api_v1_01.js">
	</script>
</head>
<body>
    <!-- przykładowe wywołanie edytora poprzez onclick na tagu IMG dzięki ff_setup(this.id) -->
    <!-- z miniaturą -->
    <img src="http://www.twojastrona.pl/grafika_miniatura.jpg" 
	    id="http://www.twojastrona.pl/grafika.jpg" 
	    onclick="ff_setup(this.id)" />
	
	<!-- zwykłe -->
	<img src="http://www.twojastrona.pl/grafika.jpg" onclick="ff_setup(this.src)" />
    
</body>
</html>

Fotoflexer nie wymaga na tym etapie funkcjonalności server-side. W kodzie strony musi jednak pojawić się kilka elementów:

Konfiguracja API - adresów przekierowania, czy język interfejsu
Dołączenie pliku JS z biblioteką JS
Wywołania API umieszczone w wybranych miejscach

Po kliknięciu na którąś z wstawionych jak na przykładzie grafik otworzy się edytor FotoFlexera:

Można dokonywać różnych operacji na grafice. Po zapisaniu zmian zostaniemy przekierowani na podany pod ff_callback_url adres URL. FotoFlexer prześle w linku (GET) ścieżkę do zmodyfikowanej grafiki (zmienna "image"). Wystarczy tylko pobrać plik i zapisać go stosownie do potrzeb. Najprostszy przykład:

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 to kolejny edytor grafik. Posiada on rozbudowane API, lecz wymagana jest rejestracja i wygenerowanie klucza. Edytor posiada wiele opcji, w tym możliwość zapisania na dysku edytowanej grafiki.

By zapisać zdalnie otwartą grafikę w naszym serwisie należy użyć przycisku Export w prawym górnym rogu. Trochę to zakręcone.

Zasada działania jest identyczna do FotoFlexera. Otwieramy edytor wraz z danymi przekazanymi w parametrach GET linku. Picnik ma jednak więcej opcji. Możemy otrzymać adres URL ze zmienioną grafiką, czy też otrzymać POSTem jego zawartość. Najprostszy przypadek integracji wygląda następująco.

Tworzymy link do edytora o budowie:
http://www.picnik.com/service/?_apikey=KLUCZ_API&_import=ADRES_URL_GRAFIKI&_export=ADRES_URL_ZWROTNY&_export_agent=browser
Link tego typu otworzy edytor Picnika i załaduje wskazaną grafikę. Opcja eksportu przekieruje na adres zwrotny wraz z adresem do zmodyfikowanej wersji w zmiennej "file".

Zapis grafiki działa na identycznej zasadzie jak dla FotoFlexera:

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 oferuje dwa edytory - Pixlr Editor podobny do Photoshopa i Pixlr Express o prostszym interfejsie do szybkiej obróbki/poprawiania zdjęcia. Dostępne jest API wraz z przykładami.

Pobieramy pomocniczą bibliotekę JS i załączamy na stronie

Za pomocą funkcji JS budujemy link otwierający edytor. Podajemy adres URL do grafiki oraz adresy zwrotne dla akcji zapisu i anulowania ("exit"):

<script type="text/javascript" src="/site_media/pixlr.js"></script> 
<a href="javascript:pixlr.edit({image:'ADRES_URL_GRAFIKI', service:'express', target: 'ADRES_URL_ZWROTNY', exit: 'ADRES_URL_ZWROTNY'});">Otwórz edytor</a>

Zmienna service pozwala wybrać edytor - "express" lub "editor"

Przy zapisie grafiki domyślnie API przekieruje na adres zwrotny z linkiem do grafiki w GET pod zmienną "image". Wystarczy grafikę zapisać:

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, 1 November 2010