1

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.

Helen Che
  • 1,951
  • 5
  • 29
  • 41

1 Answers1

2

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

fmw42
  • 46,825
  • 10
  • 62
  • 80
  • I think -colorize flag needs percentage to work but even with that I'm still not getting the result I want. I will try getting a quick jsfiddle up. – Helen Che Jul 24 '21 at 16:49
  • https://jsfiddle.net/1b4wek70/ for one of my sample images. I think culprit might be how browser/webkit and imagemagick handles blending/masking with alpha transparency? – Helen Che Jul 24 '21 at 17:04
  • Post the image used so that I can try to duplicated your result. Nevermind. I got it from the link in your file. – fmw42 Jul 24 '21 at 20:32
  • 1
    I have edited my answer to show how to do what you show in your link in your comment. – fmw42 Jul 24 '21 at 20:57