Making a Twitter Collage
emoji images mozfest NaBloPoMo twitter · 1 comment · 400 words · read ~759 times.
This is a lazy way of making a collage of Tweets.
I was originally going to use this method:
Replying to @edent@edent No idea about getting urls, but this may or may not be useful (cmd is also in image alt-text) pic.x.com/jh3yh4yki0
but, sadly, gnome-web-photo crashed repeatedly when I tried to use it. It is a typically unloved Linux program, hundreds of bug reports, but no one looking to fix them.
Instead, I used the Scheenshotlayer API - I passed wget the URLs and got back a bunch of full sized screenshots.
wget doesn't name the files nicely - so you just get the full URl as the filename. Here's a quick bash script to rename them all with padded zeroes.
BASH
var=1;
for file in *;
do
printf -v num '%02d' $var ;
mv ${file} ${num}.png;
var=$((var+1));
done
OK, so, how do we grab just the parts that we want? Rather than using any fancy image recognition stuff, I measured the area by hand.
And, to cut the image out? ImageMagick to the rescue! Let's grab a rectangle 624 pixels wide, but 900 tall, starting at 400 pixels from the left and 0 pixels from the top.
convert tweet.png -crop 624x900+400+0 +repage cropped.png
The +repage is needed to prevent offsetting issues.
And, to do that for all images in a directory:
mogrify -crop 624x900+400+0 +repage *.png
Right! Let's lay these out. Without a doubt, the simplest way is using ImageMagick's montage command.
montage *.png -tile 4x10 -geometry +0+0 montage.png
This lays out all the images on a grid 4 images wide and 10 high. The -geometry ensures there is no border around the image.
I then resized the image suitable for sticking on a web page.
The result?
TODO
The only rough spot in this process is cropping the images. At the moment, there's a lot of empty space around the Tweets. Some - with smaller photos - have gaps at the top and bottom. A more intelligent method of extracting the information is needed!
mike says:
No gnome-web-photo, at least in the two examples I tried, outputted images that could be nicely cropped to just the tweet using consistent coordinates at top left and bottom right. So it's a shame it didn't work for you as I think if it had you wouldn't now be wondering about how to do better cropping.
Another cli webpage to image tool is cutycapt.
$ cutycapt --delay=5000 --min-width=624 --min-height=1000 --url=http://www.twitter.com/edent/status/792306554343198720 --out=cuty_edent_www.png
Without the delay the image in the tweet isn't in the grab. No idea why.
For getting better crops, the area you care about has a white background and, if you've made an image of the http://www.twitter version of the tweet, that area is surrounded by non-white. Flood fill that white area with a colour that almost certainly doesn't appear elsewhere in the page, then convert every other colour except that one to black. Thenhave ImageMagick auto crop the image and extract the width, height and offset of the cropped image. Use that offset to crop the original image.
$ for i in cuty_jen_www.png cuty_edent_www.png ;do wh=$(convert "${i}" -fill lime -draw 'color 20,200 floodfill' -fill black +opaque lime -trim info:- | cut -d ' ' -f 3); convert "${i}" -crop ${wh}+16+61 "cropped_${i}";done
+16+61 are offset of the cropped image which I found to be the same for both images so have assumed is consistent and hardcoded due to sloppiness/laziness. If it's not it's easy to extract it for use. Can probably be made to work with images you got from screenshotlayer by changing the 20,200 and maybe the +16+61. Or maybe the idea is fundamentally flawed and I got lucky in it working on the two example I tried. 😉
Even with better cropping you still have a bunch of different height images. montaging them separately in N 1xY strips of approximately the same height then sticking those together might work well, but you'd need to figure out which images to put in to which strip. No idea how to do that off hand.