是否可以使用 HTML5 或 CSS3 使用渐变映射重新着色图像？答案

【问题标题】：Is it possible to recolor an image with a gradient map with HTML5 or CSS3?是否可以使用 HTML5 或 CSS3 使用渐变映射重新着色图像？
【发布时间】：2013-05-15 09:03:46
【问题描述】：

是否可以使用 HTML5 或 CSS3 的渐变映射重新着色图像？我也愿意使用 javascript 库。

我关注了这个问题，但这只是灰度和调整 rgb 值： How can I use a gradient map to tone a HTML5 canvas with an image in the canvas.

使用这种技术无法真正分配渐变来重新着色图像。任何人有任何建议，请发送到这里！

我已经包含了一个使用图像编辑器创建的效果图像的链接，以便更好地向不熟悉的人解释效果：

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

谢谢！

【问题讨论】：

标签： javascript html css gradient grayscale

【解决方案1】：

没有任何内置功能可以为您完成此任务。

但是，您可以使用 javascript 对图像进行一些后期处理。

这里有一个很好的链接：

Image manipulation with Canvas

基本上，您将通过 getImageData() 访问像素并使用 putImageData() 对其进行更改。可以在上面发布的链接中看到类似的示例。

【讨论】：

【解决方案2】：

您可以在此处使用 css 图像过滤器属性，我已附上链接

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

【讨论】：

【解决方案3】：

有一个很棒的库叫做 gradientmaps.js* 可以很好地处理这个问题。

<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>

此脚本会将您的颜色列表转换为适当的 SVG 过滤器代码。然后它生成一个<svg> 元素。它为 <filter> 元素分配一个唯一的 id，然后将该过滤器应用于您的 DOM 元素。

上面的例子执行后，DOM 会变成这样......

<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;);">

* 我已经链接到我的这个项目的分支，它增加了对 IE / Edge 的支持。

【讨论】：