RkBlog

Hardware, programming and astronomy tutorials and reviews.

Integracja edytorów grafiki z aplikacjami Django

Wykorzystujemy internetowe edytory grafik takie jak FotoFlexer, Picnik i Pixlr w aplikacjach Django

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: Po kliknięciu na którąś z wstawionych jak na przykładzie grafik otworzy się edytor FotoFlexera:
fotoflexer
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.
picnik
By zapisać zdalnie otwartą grafikę w naszym serwisie należy użyć przycisku Export w prawym górnym rogu. Trochę to zakręcone.
picnik2
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.

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.
pixlr
RkBlog

1 November 2010;

Comment article