How to add dynamic watermarks to images in Craft/Twig

Question

I'm wondering if something is possible in Twig/Craft CMS that I used to do in ExpressionEngine and CE Image.

I want to output company logo images, but as they're all different shapes and sizes, I want to merge them with a white rectangle background image so that the page looks neat and tidy, e.g. like this.

This is how I did this in EE (using CE Image's watermark feature, so the logo is essentially a watermark on the white background):

{exp:ce_img:pair src="{my_logo_image}" width="250" height="150" allow_scale_larger="yes" parse="inward"}
  {exp:ce_img:single src="{my_white_rectangle_background_image}" width="300" height="200" crop="yes" allow_scale_larger="yes" watermark="{made}"}
{/exp:ce_img:pair}

Any ideas on how I'd do this in Craft at all? I'm not even sure where to start. I'm currently using the following, but this just outputs the logos/images, without even trying to merge them with the white rectangle background image, so any help on this would be appreciated, thanks.

{% set thumbnailImage = {
  mode: 'fit',
  width: 300,
  height: 200,
  quality: 80
} %}


{% for asset in entry.mainImage %}
  <img src="{{ asset.getUrl(thumbnailImage) }}" alt="{{ entry.title }}" />
{% endfor %}

Answer 1

You'd definitely need a plugin for this. Craft's native abilities don't cover watermarks.

I've never attempted it myself, so these are just "best guesses"... but give the following plugins a shot:

• https://github.com/fruitstudios/AviaryImageEditor/
• http://michaelrog.com/craft/imagesmith

As always, you can find a full list of existing plugins here:

https://straightupcraft.com/craft-plugins

If none of those work for you, you may need to develop your own custom plugin to handle it.