3

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

我关注了这个问题，但这只是灰度和调整 rgb 值： 如何使用渐变映射来调整带有画布中图像的 HTML5 画布。

使用这种技术无法真正分配渐变来重新着色图像。大家有什么推荐的，请发到这里！

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

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

谢谢！

4

3 回答 3

2

您可以在这里使用 css 图像过滤器属性，我附上了链接

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

于 2013-05-20T18:35:27.633 回答
1

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

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

这是关于这个主题的一个很好的链接：

使用 Canvas 进行图像处理

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

于 2013-05-20T18:21:42.357 回答
0

有一个很棒的库叫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>元素。它为元素分配一个唯一的 id <filter>，然后将该过滤器应用于您的 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 的支持。

于 2017-03-16T18:56:48.067 回答