Data, Maps, Usability, and Performance

Online Screenshot Generator with Imgur

Last updated on December 28, 2012 in Design, Development

wp screenshot service

As I have mentioned previously, WordPress has a great screenshot service that allows you to make quick screenshots from any valid url. The image above is a WordPress generated screenshot, just look at the source of this page. People like to visualize things, so screenshots in articles can improve the user experience and it’s nice to offload the work to a third party (WordPress). However, dynamically generated screenshots have a performance cost and it’s kind of wasteful to keep asking WordPress to regenerate the same screenshot when my use case only needs a screenshot generated once.

Initially, I though about writing a small PHP script that will fetch and cache the screenshot on first request and serve the image from cache on subsequent requests. Basically, instead of pointing the img src attribute to WordPress, it would point to a small caching proxy script. But, ideally, I do not want to host these images. So, instead, I decided to write a screenshot generator that takes a list of urls, fetches the screenshots for each url through WordPress, leverages the Imgur API to store these screenshots on Imgur, and finally, sends the image urls for the generated screenshots back to the end user.

Since I have already wrote a neat HTML5 Imgur File Uploader, I can reuse some of that code on the front-end and integrate it with the PHP logic in the backend. The front-end will grab input from a textarea (where a user can provide multiple urls) and send individual urls to the PHP script. The PHP makes a curl call to retrieve the image from the WordPress service. If WordPress does not return an image because it is processing, we make php sleep for 3 seconds and try again. At this point, WordPress is usually done and the screenshot is sent back to me. At this point, I send the screenshot to an upload function that uses Imgur API to store the screenshot on Imgur and the API call responds with final image location. In all honesty, this code and process is kinda crappy and slow but it works and I just put it together in the last 30 minutes.

Here is the Multiple Screenshot Maker using WordPress and Imgur API. Leave a comment if you want all the source code.


Here is the source code, just insert your Imgur API key.

Tags: , , ,

Facebook Twitter Hacker News Reddit More...