Image Action for Blend mode: Darken or Multiply?

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
datarazor's picture

Hi There, anyone have any code written for a custom Image Style Action that will blend (darken or multiply) an image into a canvas color I provide?

I've been toying with Image Styles Actions module and I can't seem to find a darken/multiply blend mode.

I can't install ImageMagick on this server, if that's important. So I'm hoping for an Action I can load that will process the images as necessary.

Any way to do this with Image Actions or with custom code?

Thanks!!

Comments

Try im_raw

Chris Charlton's picture

If stacking the actions isn't working for you, consider using the ImageMagick Raw module to provide any custom settings to ImageMagick. http://drupal.org/project/im_raw

Chris Charlton, Author & Drupal Community Leader, Enterprise Level Consultant

I teach you how to build Drupal Themes http://tinyurl.com/theme-drupal and provide add-on software at http://xtnd.us

Thanks for the mention! I

christefano's picture

Thanks for the mention! I became the maintainer of im_raw this week. The timing of your comment couldn't have been better.

Hi Chris, thanks for the

datarazor's picture

Hi Chris, thanks for the recommendation. I checked im_raw and it says thought that imagemagick is required? As per my first post: I can't set that up on this server...

--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech

Okay I'm still stuck here,

datarazor's picture

Okay I'm still stuck here, anyone want to offer a price for coding this PHP snippet? no imagemagick available on the server, has to be done with just Image Style Actions.

--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech

Is there something in image

BTMash's picture

Is there something in image style actions that is missing? From looking at the module page, it specifically mentions it allows alpha blending. And you should be able to do it with the PHP GD library (thus not requiring imagemagick at all).

So, the module of the day is:

BTMash's picture

So, the module of the day is: Imagecache Actions (they kept the name from the d6 days but yeah, it can be tough to figure out). Anyways, it has capabilities to add an overlay or add alpha transparency (or flatten to a color), and it all seems to work. So you might not need to do any php coding for this?

Sass/CSS?

fejn's picture

Just a thought: you might be able to implement such an action using SASS using mixins like lighten/darken etc:
http://thesassway.com/intermediate/mixins-for-semi-transparent-colors

(I'm not completely sure of the implementation, but I suspect it will end up doing just doing what some of the other methods outlined above are suggesting, just via different route).

HTH, Jeff

Interesting approach.

BTMash's picture

If the image is just for display on the site (ie no one going to be upset downloads/saves it and they find it looks different), this is a really interesting approach to solve the issue (since it would just be css rules) and you end up having fewer things to worry about. This is def. an approach I'll think about the next time I have styles that are not width/height based. The one thing you would want to make sure is that your image somehow ends up with the classes you want so this is flexible enough.

If you're looking to explicitly alter the image, then I suggest imagecache_actions from above.

Views

fejn's picture

Views is your best friend here again. You can assign a class that is associated with a field usingthe Styles portion of the interface (e.g. blended-image). then you might end up with a declaration in your SASS/css file like:

.blended-image {
background: mix(black, white, 50%);
background: rgba(black, 0.5);
}

If your out to try al sorts of unusual solutions, you could use a special views.tpl.php file to customize the styling in much the same way you do with any other .tpl.php file: your view could use a views-field--blended-image.tpl.php (assuming that you set up your view to use a 'blended-image' field as part of the fields list for the view. Not the most obvious way to do it, but it allows you complete control over how the content for any particular field is rendered, without writing your own module to handle a special case.

Hi there thanks for all the

datarazor's picture

Hi there thanks for all the replies!

So I've toyed with the settings in ImageCache Actions further but I just can't replicate the effect I need. It is not transparency (alpha), it is not a hue shift, it is a blend mode. Maybe I just don't know which combination I need to use? It is certainly possible.

Here is what it should look like:

http://fountain-city.com/files/demo.png

Left: original, Right: the blended mode airplane on top of a red background:

The blend mode is: Darken I need, although I could work with Multiply as well if necessary.

I would use SASS/CSS to blend it, but the support for blend modes is just not where it needs to be yet:

http://html.adobe.com/webplatform/graphics/blendmodes/browser-support/

And it HAS to look correct, I can't have it look different on Safari for example, or older browsers, so I need to process the image, not use CSS.

@BTMash I tried to look up PHP GD library but I didn't see any specific functions for what I need, note that this is not something I do every day though, so a blend mode here might be obvious to someone else who uses this tool. Is this the function that I need?

http://php.net/manual/en/function.imagealphablending.php

I am happy to implement a function into a custom action, if I know that the function I am trying to use is an actual Darken blend mode.

Naturally I'd rather just use a custom Image Cache Action.

PS I meant in my original post ImageCache Action, but I had assumed in my head that Cache = Style because of the D7 change.

Thanks for any insight or even just to say that it is indeed possible with ImageCache, any pointers to which combination you are using to make it work would be golden cause I've toyed with it for too long already to no avail... thanks!

--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech

Watermark overlay transparent png

blasthaus's picture

This can be some using a watermark png overlay with transparency somewhere in the 35-50% range (my guess) which will obviously work on all browsers.

Thanks @blasthaus, watermark

datarazor's picture

Thanks @blasthaus, watermark with a solid red file being used that is applied over the top gets me fairly close, but this is still not a blend effect, here are the results of several settings:

http://fountain-city.com/files/demo.png

As you can see the image retains its look, but it needs to actually darken, like the darken effect implies. If I try to desaturate it loses the transparent edges, so that is a no-go.

I can keep reducing the brightness but you lose all the details and it just becomes a silhouette.

Any new ideas?

--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech

Tim Thumb

fejn's picture

Just another approach:
a) Have you tried the Tim Thumb https://www.drupal.org/project/timthumb module?
It will give you a number of capabilities that you can dynamically apply to your image. Check this http://www.binarymoon.co.uk/projects/timthumb/ and when flipping through some of the details, check the demos. I think you may be particularly interested in the use of filters http://www.binarymoon.co.uk/2010/08/timthumb-image-filters/

HTH, Jeff

Thanks fejn,I checked the

datarazor's picture

Thanks fejn,

I checked the module, but it doesn't actually offer either of the blend modes I require:

http://www.binarymoon.co.uk/2010/08/timthumb-image-filters/
http://www.binarymoon.co.uk/demo/timthumb-filters/

We have colorize, but that isn't what I need. I need Darken:

http://en.wikipedia.org/wiki/Blend_modes#Darken_Only

At this point I';d like to get a quote from someone to code this in PHP, I'm just swamped with work currently and could use some help getting this sorted. I believe it can be done in PHP using GD and ImageCache Actions (custom)

Thanks to whoever reads this and can provide me with a price quote!

Cheers,

Seb.

--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech

Darken / Multiply actions for imageCache

jcgjcgjcg's picture

Hi Seb,

I went a tiny step further and by made GD-based modules for both darken and multiply blend modes, which allow you to choose which image you want to use for each step of the image style, without having to fiddle with PHP code in a custom action, or giving any user the right to use PHP snippets, which scares me.

It naïvely applies the overlays to the top left corner of the base image, so make sure the base has the same dimensions as the overlay for best results.

It's not rigorously tested or optimised for speed in any way, and was cobbled together based on existing actions and the definition of the blend modes in a few hours, but if it works for you, feel free to donate to the PayPal account linked below the download link:

http://media.jcgriffiths.com/darken_multiply/

Thanks

Two and half years later...

jcgjcgjcg's picture

...there are about 250 downloads of these modules, yet not a single response. I'm curious- is it working for you? Where are you using it?

I just found your modules and

Khalor's picture

I just found your modules and they've gotten me out of a very tricky spot!
I also used them as a base to roll my own that does the 'overlay' blending mode in addition to your 'multiply' and 'darken' modes - fairly basic change but happy to share the math if anyone wants it.