cssmaskimagemagick-convertbackground-blend-mode

Imagemagick replicate css mask-image and background-blend-mode rules

I want to translate these CSS rules into Imagemagick's convert command(s):

.foo {
  background: red url('image.png');
  mask-image: url('mask.png');
  background-blend-mode:multiply;
}

Any suggestions?

JSFiddle with using my own sample image here: https://jsfiddle.net/1b4wek70/

Note that both image and mask are the same source but that shouldn't be and issue. I also use -webkit-mask-image for Chrome as it still needs to be prefixed so make sure it's viewed on an appropriate browser.

Solution

  • In ImageMagick, I believe that would be (Unix syntax)

    convert -size 500x500 xc:white \( image.png -fill blue -colorize 100 \) -compose over -composite image.png -compose multiply -composite result.png

    enter image description here