布料设计师。着色的图层

Question

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

我尝试使用canvas填充图像的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>

问题的图形表示：

UPD： 谢谢大家！ 我用帆布解决了我的问题 我尝试了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。