User:Jonas Lund/ImageMerger: Difference between revisions

Revision as of 16:20, 1 December 2011

What

ImageMerger is a cgi-based script that merges two images using Flickr and Google Images as source.

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>

Why

To make a slightly more fun image re-search tool, and try and isolate the net-art aesthetics. (...)

@@ Line 1: / Line 1: @@
 ==What==
-ImageMerger is a cgi-based script that merges two images using Flickr and Google Images as source.
+[http://pzwart3.wdka.hro.nl/~jlund/imger/ ImageMerger] is a cgi-based script that merges two images using Flickr and Google Images as source.
 ==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<br/>
@@ Line 151: / Line 151: @@
 ==Why==
+To make a slightly more fun image re-search tool, and try and isolate the net-art aesthetics. (...)