User:Jonas Lund/ImageMerger: Difference between revisions

Latest revision as of 13:01, 5 December 2011

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>

@@ Line 151: / Line 151: @@
 </source>
-==Why==
-To make a slightly more fun image re-search tool, and try and isolate the net-art aesthetics. (...)