User:Jonas Lund/ImageMerger
What
ImageMerger is a cgi-based script that merges two images using Flickr and Google Images as source.
Disclaimer, For now, I've totally ignored error checking, and as of now, it only works if you search for one word. :)
How
The index.html sends the query via ajax to the cgi script, using jQuery. The script then searches the Flickr api and the Google Images for the first result based on that query. This is downloaded to the server, and then merges them using imageMagick, randomly picking one out of ten available masks. One that has completed, the resulting image is sent back to index.html and appended to the page.
Imger.py
#!/env/bin/python
# coding: utf-8
print "Content-type: text/html\n"
import cgi, cgitb, datetime, urllib2, os, flickrapi, oauth, pprint, lxml.etree, json, random
from subprocess import call
cgitb.enable()
#Get Query
form = cgi.FieldStorage()
query = form["query"].value
#get Flickr Pic
API_KEY = ''
API_SECRET = ''
flickr = flickrapi.FlickrAPI(API_KEY, format='etree')
photos = flickr.photos_search(tags=query, per_page='1')
for photo in photos[0]:
owner = photo.attrib['owner']
pid = photo.attrib['id']
photoSizes = flickr.photos_getSizes(photo_id=pid)
flickSrc = photoSizes[0][3].attrib['source']
segements = flickSrc.rpartition('/')
for s in segements:
flickrFile = s
ext = flickrFile.partition(".")
flickTmp = "flicktmp.{0}".format(ext[2])
#download
cmd = "/usr/bin/wget {0} -O /home/jlund/public_html/imger/imgs/{1} -q".format(flickSrc, flickTmp)
call(cmd, shell=True)
#get Google Pic
googleSearch = "https://ajax.googleapis.com/ajax/services/search/images?q={0}&v=1.0&rsz=1".format(query)
f = urllib2.urlopen(googleSearch)
data = json.load(f)
for r in data["responseData"]["results"]:
googleSrc = r['url']
segements = googleSrc.rpartition('/')
for s in segements:
googleFile = s
ext = googleFile.partition(".")
googleTmp = "googletmp.{0}".format(ext[2])
#download
cmd = "/usr/bin/wget {0} -O /home/jlund/public_html/imger/imgs/{1} -q".format(googleSrc, googleTmp)
call(cmd, shell=True)
#merge with imageMagick and output
now = datetime.datetime.now()
newFilename = str(now.day) + str(now.hour) + str(now.minute) + str(now.second) + ".png"
rand = random.randrange(1,11)
mask = "mask{0}.png".format(rand)
mergeCmd = "/usr/bin/composite /home/jlund/public_html/imger/imgs/{0} /home/jlund/public_html/imger/imgs/{1} /home/jlund/public_html/imger/imgs/{2} /home/jlund/public_html/imger/imgs/{3}".format(flickTmp, googleTmp, mask, newFilename)
call(mergeCmd, shell=True)
#cleanup
rmCmd = "rm /home/jlund/public_html/imger/imgs/{0}; rm /home/jlund/public_html/imger/imgs/{1};".format(flickTmp, googleTmp)
call(rmCmd, shell=True)
print "http://pzwart3.wdka.hro.nl/~jlund/imger/imgs/{0}".format(newFilename)
index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Image Merger</title>
<meta name="description" content="Image Merger">
<meta name="author" content="Image Merger">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body, html {width: 100%;}
html {margin: 0; padding: 0;}
body {font: 14px/1.3 sans-serif; color: #333;}
#search-form {position: absolute; top: 20px; right: 20px; width: 300px;}
#loader {display: none; position: fixed; top: 20px; left: 0; text-align: center;}
img {margin: 20px;}
#results {text-align: center; width: 100%;}
</style>
</head>
<body>
<div id="loader">
<img src="http://pzwart3.wdka.hro.nl/~jlund/imger/loader.gif"/>
</div>
<div id="search-form" role="main">
<form action="http://pzwart3.wdka.hro.nl/~jlund/cgi-bin/imger.py" method="POST" id="search">
<label for="query">Search for...</label>
<input type="text" name="query" id="query" />
<input type="submit" name="submit" value="Go!">
</form>
</div>
<div id="results">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.4.min.js"><\/script>')</script>
<script>
$("#loader").ajaxStart(function() {
$(this).show();
});
$("#search").submit(function() {
var formVal = $("#query").val();
$.ajax({
type: "POST",
data: {query: formVal},
url : 'http://pzwart3.wdka.hro.nl/~jlund/cgi-bin/imger.py',
success : function(data) {
$("#loader").hide();
if(data) {
$("<img/>", {
src: data
}).prependTo($("#results"));
}
}
});
return false;
});
</script>
</body>
</html>