半透明点上的加色答案

【问题标题】：Additive color on translucent dots半透明点上的加色
【发布时间】：2012-04-25 13:55:57
【问题描述】：

我有一个方形图标，被黑色面具变暗。这个面具上应该有许多点，各种颜色。这些点具有附加颜色，因此当它们相互叠加时，它们会变亮。结合起来，足够多的这些会使黑色蒙版变成多色甚至是白色，从而露出下面的图像。

如何做到这一点？客户端，使用 canvas 还是 css3？服务器端，使用 ImageMagick 还是其他？

这是画布上加色的链接：http://contrapunctus.net/blog/2010/rgb-demo

【问题讨论】：

可以“用代码”完成。你列出的一切都是可能的。你试过什么吗？您的问题是什么，或者您是在请人为您写吗？
抱歉，我本来可以说得具体点。我以前从未使用过画布，并且正在寻找有人向我展示必要的 api 方法 - 而不是必须四处尝试先尝试一件事，然后再尝试另一件事..

标签： javascript ruby image-processing css canvas

【解决方案1】：

HTML5 Canvas + Context Blender + 屏幕模式。

或者，正如您所链接的，使用加法全局复合模式。

或者使用 ImageMagick。

或者使用 ChunkyPNG 加上加法。

【讨论】：

玩过photoshop后，我想我需要用减法堆肥做一个白色层。这会将图像着色为黑色。在这个覆盖层变暗的地方，图像显示出来。因此，这些点需要彼此变暗而不是变亮，并且从所需的颜色反转。
我在使用上下文混合器时遇到了问题 - 叠加层总是出现在图像画布下方，我不知道为什么。可以看到源码，但是由于跨域问题无法运行：jsfiddle.net/pehrlich/a47bD/2
@Peter 减少它。制作一个可重现的测试用例，其中包含显示问题所需的绝对最少代码量。让它在 JSFiddle 上实际运行。如果您可以删除 HTML、CSS 或 JS 并且问题存在，那么您还没有完全消除它。要么你会得到你的“啊哈！”在这个过程中的时刻，否则你最终会得到一些我可以帮助你的东西。您现在粘贴的甚至不是合法的 JavaScript，更不用说显示问题的工作代码了。
这是一个工作小提琴（从咖啡转换为 js），蓝色添加了照片：jsfiddle.net/pehrlich/a47bD/3 这是一个托管版本，具有相同的代码，复制和粘贴。蓝色在照片后面：minthatheater.com/canvas.html
总之，你需要wait until the data-url is ready。如果您将最后一行代码更改为setTimeout(function(){ ocontext.blendOnto(ucontext,'add')},5000)，它可以正常工作，而 1ms 的延迟有时会起作用，有时会失败。如果您将代码包装在 $('#image1').bind('load',function(){ ... }); 中，它总是可以工作的。