布艺设计师。图层着色

Question

我尝试在基于图层的结构中制作布料设计器应用程序，就像在 Photoshop 应用程序中一样。 我正在使用带有 alpha 通道的图像，并在其下方放置具有不同背景颜色的 div。因此，我希望改变图像的颜色。 但是我不知道如何使用相同的颜色将该图像放在另一层上。 当我尝试重复相同的技巧时，它会填充我想要透明的额外空间。换句话说，我只需要画一部分 一个图像，让另一部分透明。

我尝试使用画布填充图像的 rgb(255,0,255) 部分，但画布太慢了。

<div class="preview_under">
  <div style="background: transparent url(images/main_template.png);" class="preview_middle">
    <div class="preview_over">
      <!-- override layers -->
      <div class="layer" style="background: url(images/blue.jpg);" data-name="modern" data-section="pocket">
        <img src="images/pocket_modern.jpg">
      </div>
      <!-- /override layers -->
    </div>
  </div>
  <!-- color of the template -->
  <div class="fill" style="background: url(images/blue.jpg);"></div>
</div>

问题的图形表示：

更新： 谢谢大家！ 我使用画布解决了我的问题。
我尝试了globalCompositeOperation 属性，它运行良好。 演示是here。

Answer 1

画布应该很快，也许慢与使用的算法有关。

但是，如果您尝试使用画布，则意味着您的目标是现代浏览器。所以SVG可能会起作用:)

使用 SVG 更改颜色非常简单（参见 http://jsfiddle.net/diegof79/kkxP3/）：

<svg width="100" height="100">
  <circle id="pocket" cx="50" cy="50" r="40" 
          stroke="black" stroke-width="4" fill="yellow" />
</svg>

在 JavaScript 中：

document.getElementById('pocket').style.fill = 'red';

您可以将布料部分叠加在一个图层中，并使用Inkscape 之类的工具来绘制它们（另外，您可以使用可视化编辑器在 SVG 上设置背景图像，因此您无需进行叠加手工 :) )

其他可能的解决方案是：

• 有一组预定义的颜色，以及每个变体的带有“精灵”的 PNG，因此您只需在每次颜色更改时更改背景偏移量。 （好：不需要任何特别的东西，并且适用于所有浏览器；坏：颜色变化是固定的，创建这些精灵很耗时）。

• 使用画布更改图片（查找慢算法中的问题）。然后可以使用toDataURL 缓存画布生成的图像。这样，当用户更改颜色时，您将使用缓存的图像（如果它已经存在）。 （好：不需要手动编辑图片；坏：代码更复杂）

Answer 2

另一种解决方案，浏览器支持有限，但很容易实现，是只用一种颜色设置图像，但可以使用饱和度和亮度变化。

然后申请

-webkit-filter: hue-rotate(xdeg);

更改为任何颜色。

做同样的事情，但使用 svg 过滤器，可以获得更多支持

a silly demo

Answer 3

谢谢大家！ 我通过画布解决了我的问题。
我刚刚使用了globalCompositeOperation 属性。

..
ctx.drawImage(original, 0, 0);
ctx.globalCompositeOperation = "source-in";
ctx.drawImage(fill, 0, 0);
ctx.globalCompositeOperation = "source-over";
ctx.drawImage(border, 0, 0);
...

演示是here。