cloudinary

Inspired by Sense-Si, the process fills in text into a HTML page and uses a PhantomJS (on a docker container) and takes a screenshot. I wanted to see if I can make these in a simpler way with other tools I currently use already.

Trying out with Image Magick

First, lets download the image

wget -O header-plain.jpg "https://source.unsplash.com/featured/1200x630/?mountains"

single command but overflows

echo -n 'How to generate caption images with ImageMagick?' | composite -background rgba\(255,255,255,0.5\) -font BrushScriptI -pointsize 50 label:"@-" -channel rgba -alpha set  -gravity south -transparent-color white header-plain.jpg header-title1.jpg

But the text overflows when the image is of limited width

echo -n 'How to generate caption images with ImageMagick?'| convert -size 1200 -font BrushScriptI -pointsize 50 -gravity center -background rgba\(0,0,0,0.5\) -fill white caption:'@-' text.png
composite -channel rgba -alpha set -gravity south text.png header-plain.jpg header-title.jpg

This is how it looks with Image Magick

Trying with Cloudinary

Well, its kind of straight forward from the documentation to add text to an image.

Note: this is a dynamic image rendered off of Cloudinary servers, text can be passed in the URL. Text just needs to be encoded.

Trying with CSS

CSS 3 spec has become too powerful and once the layout is set, you need to take a screenshot from the generated style like in the first linked url.