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.