Is it possible to recolor an image with a gradient map with HTML5 or CSS3?

Question

Is it possible to recolor an image with a gradient map with HTML5 or CSS3? I am also open to using javascript libraries.

I followed this question, but this only greyscales and adjust rgb values: How can I use a gradient map to tone a HTML5 canvas with an image in the canvas.

It is not possible to truly assign a gradient to recolor an image with this technique. Anyone with any recommendations, please send them this way!

I have included a link to an image of the effect created with an image editor to better explain the effect to those unfamiliar:

http://www.imagesincontext.com/IICFeatures/GradientMap.gif

Thanks!

score 2 · Answer 1 · answered May 20 '13 at 18:35

2

you can make use of css image filter properties here i have attached the link

http://html5-demos.appspot.com/static/css/filters/index.html

answered May 20 '13 at 18:35

sandyJoshi

733
9
20

score 1 · Answer 2 · answered May 20 '13 at 18:21

There is nothing built in that will accomplish this for you.

You can, however, do some post-processing on the image using javascript.

Here's a great link on the subject:

Image manipulation with Canvas

Basically, you'll access the pixels through getImageData() and change it with putImageData(). A similar example can be seen at the link posted above.

score 0 · Answer 3 · answered Mar 16 '17 at 18:56

There is a great library called gradientmaps.js* which handles this really nicely.

<img id="myimage" src="photo.jpg">

<script src="gradientmaps.min.js"></script>
<script>
  var target = document.getElementById('myimage');
  var gradientMap = "blue, green, yellow";

  GradientMaps.applyGradientMap(target, gradientMap);
</script>

This script will convert your list of colors into the appropriate SVG filter code. Then it generates an <svg> element. It assigns a unique id to the <filter> element and then applies that filter to your DOM element.

After the example above is executed, the DOM would change to look like this....

<svg version="1.1" width="0" height="0">
  <filter id="filter-1489690359932">
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix>
    <feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncR type="table" tableValues="0 0 1"></feFuncR>
      <feFuncG type="table" tableValues="0 0.5019607843137255 1"></feFuncG>
      <feFuncB type="table" tableValues="1 0 0"></feFuncB>
      <feFuncA type="table" tableValues="1 1 1"></feFuncA>
    </feComponentTransfer>
  </filter>
</svg>
<img id="myimage" src="photo.jpg" 
     data-gradientmap-filter="filter-1489690359932" 
     style="filter: url(&quot;#filter-1489690359932&quot;);">

* I have linked to my fork of this project which adds support for IE / Edge.

Is it possible to recolor an image with a gradient map with HTML5 or CSS3?

3 Answers3