Miscellaneous

  Home arrow Miscellaneous arrow Page 4 - Flickr Puzzle Mashup
MISCELLANEOUS

Flickr Puzzle Mashup
By: bluephoenix
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2006-11-13

    Table of Contents:
  • Flickr Puzzle Mashup
  • Getting the Image
  • Slicing the Image
  • Sending the Pieces
  • Client-Side JavaScript
  • Conclusion

  •  
     

    SEARCH CODEWALKERS

    TOOLS YOU CAN USE

    advertisement

    Flickr Puzzle Mashup - Sending the Pieces


    (Page 4 of 6 )

    Dumping pieces to the browser is probably the trickiest part of the whole process. If we make the assumption our audience is only using Firefox then we could base64 encode the images and embed them directly inline in our HTML. I like this option since we won't have to worry about temporarily storing the images on the server or performing cleanup of stale puzzle pieces.

    <?php
    ob_start
    ();
    imagejpeg($imgnull100);
    $piece base64_encode(ob_get_contents());
    ob_end_clean();
    imagedestroy($img);
    $seqId $y $numX $x;
    echo 
    "&lt;img src=\"data:image/gif;base64,$piece\" 
    id=\"piece$seqId\" alt=\"\"/&gt;"
    ;
    ?>

    The imagejpeg function can output its image to either a file or the output buffer. Since we don't want to deal with any extra files, I've captured the output using PHP's output buffering functions. Then it's a simple matter of encoding the output with the base64 function and echoing it to the client.

    Unfortunately, Internet Explorer doesn't know how to handle the inline/encoded images. For those users to enjoy our mashup too we'll want to adopt the more vanilla solution of sending the pieces to a temporary holding folder and linking to them.

    <?php
    $seqId 
    $y $numX $x;
    $tmpName md5($url $seqId);
    imagejpeg($img"tmp/$tmpName"100); 
    imagedestroy($img);

    echo 
    "&lt;img src=\"fetch.php?piece=$tmpName\" 
    id=\"piece$seqId\" alt=\"\"/&gt;"
    ;
    ?>

    We don't want to overwrite any other image pieces that may be the temp directory so each one is given a unique filename by hashing a combination of the original Flickr url and a sequence id. The img tag links to the image through another PHP script to make sure stale images are deleted from the directory. The contents of such a file could simply be:

    <?php
    /* output appropriate content-type header */
    header("Content-Type: image/jpg");

    if (isset(
    $_GET["piece"])  &amp;&ampctype_alnum($_GET["piece"]) &amp;&amp;
      
    file_exists("tmp/" $_GET["piece"])) {

      
    /* pass the temp image file's contents then delete it to
    keep the temp directory clean */
      
    readfile("tmp/" $_GET["piece"]);
      
    unlink("tmp/" $_GET["piece"]);
    }
    else {
      
    /* pass a "does not exist" image */
      
    readfile("noexist.jpg");
    }
    ?>

    You may also have noticed I've made sure each image has an id attribute. This comes in handy when we add drag and drop functionality next.

    More Miscellaneous Articles
    More By bluephoenix

    blog comments powered by Disqus

    MISCELLANEOUS ARTICLES

    - Oracle Database XE: Indexes and Sequences
    - Modifying Tables in Oracle Database XE
    - Oracle Database XE: Tables and Constraints
    - More on Oracle Databases and Datatypes
    - Oracle Database XE Datatypes: Datetime and L...
    - Oracle Database XE Datatypes: Character and ...
    - From Databases to Datatypes
    - Firefox 3.6.6 Released with Improved Plug-in...
    - Attention Bloggers: WordPress 3.0 Now Releas...
    - Reflection in PHP 5
    - Inheritance and Other Advanced OOP Features
    - Advanced OOP Features
    - Linux from Scratch V.6.6 Review
    - Linux Gaining in Strength
    - Install Slackware on Your Old PC


    © 2003-2012 by Developer Shed. All rights reserved. DS Cluster 9 - Follow our Sitemap