布设计师。图层着色

Question

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

我试图使用画布填充rgb(255,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属性，它运行得非常完美。演示是这里。

Answer 1

谢谢大家！我用画布解决了我的问题。

我只是使用了globalCompositeOperation属性。

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

演示是这里。

Answer 2

画布应该是快速的，也许慢的程度与正在使用的算法有关。

但是，如果您尝试使用画布，这意味着您的目标是现代浏览器。因此，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，所以您只需要更改每种颜色的背景偏移量。(good:不需要任何特殊的东西，并且适用于所有浏览器；坏:颜色变化是固定的，创建这些精灵很费时)。
• 使用画布更改图片(查找慢速算法中的问题)。然后可以使用toDataURL缓存画布生成的图像。这样，当用户更改颜色时，如果缓存的图像已经存在，则使用它。(好:你不需要手工编辑图片；坏:代码更复杂)

Answer 3

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

然后申请

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

改变到任何颜色。

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

愚蠢的演示