Gyazo.. on your own server

|

A while back, Paul Irish turned me on to gyazo, a very small, very simple, very free app that allows you to very quickly share screen captures over the web. It works by first using the operating system’s own screen capture tools to snap an image of a region you specify, then it uploads that image to gyazo.com, opening it in your web browser. The URL is even copied to the clipboard afterwards.

Perfect, right?

Well.. almost perfect. Because of firewall restrictions, I found that gyazo.com was blocked for some of my friends, so they couldn’t see my screen captures. Also, I really liked the idea of uploading the images to my own server, so that I’d have full control over them.

So, that being said, I decided to crack open gyazo.app (Right click, Show Package Contents) and see if there was anything I could do to change that.

Fortunately, modifying gyazo was pretty easy (despite the fact that I know next to nothing about Ruby). In the /Applications/gyazo.app/Contents/Resources/script file, I gave these two variables:

HOST = 'gyazo.com'
CGI = '/upload.cgi'

values that made sense for my server. My HOST is 'benalman.com' and CGI is 'gyazo.php', a little PHP script I’ve worked up and posted on GitHub. I’ll post the script here as well:

<?PHP

/*
 * PHP upload for Gyazo - v1.2.1 - 3/13/2011
 * http://benalman.com/news/2009/10/gyazo-on-your-own-server/
 * 
 * Copyright (c) 2011 "Cowboy" Ben Alman
 * Licensed under the MIT license
 * http://benalman.com/about/license/
 */

// The local path in which images will be stored (change as necessary).
// You can also use dirname( __FILE__ ) . "/relative/to/this/script/";
$path = '/srv/www/gyazo/';

// The URI path at which images will be accessed (change as necessary).
$uri  = 'http://' . $_SERVER['HTTP_HOST'] . '/grab/';

// "imagedata" can be adjusted in the form-data name attr in gyazo's script
// configuration file. If it's non-existent or has no size, abort.
if (!isset($_FILES['imagedata']['error']) || $_FILES['imagedata']['size'] < 1) {
  echo $uri, 'invalid.png';
  exit;
}

// Generate a unique filename.
$i = 0;
do {
  $filename = substr(md5(time() . $i++), -6) . '.png';
  $filepath = "$path$filename";
} while ( file_exists($filepath) );

// Move the file. If moving the file fails, abort.
if ( !move_uploaded_file($_FILES['imagedata']['tmp_name'], $filepath) ) {
  echo $uri, 'error.png'; 
  exit;
}

// Compress the image (destroying any alpha transparency).
$image = @imagecreatefrompng($filepath);
imagepng($image, $filepath, 9);
imagedestroy($image);

// Return the image URI.
echo $uri, $filename;

?>

Obviously, you’ll want to adjust $path and $uri to the appropriate values for your server, and make sure that the local directory stored in $path is writable by PHP. But other than that, it should just work.

One last thing, in the gyazo.app script file, I also changed system "screencapture -i #{tmpfile}" to system "screencapture -io #{tmpfile}", adding the o option which means “in window capture mode, do not capture the shadow of the window”. I never really liked the window shadow capturing, and since the PHP imagepng function removes alpha transparancy, it seemed like a good change to make.

Et voilà!

my tweet

I have only tried this in the OS X version of Gyazo, so I have no idea how it works in other versions. If you can confirm that it works (or doesn’t work) in Windows, or have any comments or suggestions, please let me know in the comments!

Notes

  • Be sure to disable Magic quotes, because they will corrupt your binary image data.

Post A Comment

  • Any of these HTML tags may be used for style: a, b, i, br, p, strong, em, pre, code.
  • Multi-line JavaScript code should be wrapped in <pre class="brush:js"></pre>
    (supported syntax highlighting brushes: js, css, php, plain, bash, ruby, html, xml)
  • Use &lt; instead of < and &gt; instead of > in the examples themselves.