我正在一个项目中，用户将选择各种透明的png图像，这些图像将使用z-index彼此叠加。用户将能够更改每个图层上图像的颜色，然后将使用GD将其合并并保存在服务器上。我宁愿使用渐变贴图而不是使用HSL滑块，因为图像是灰度的，因此我可以使用它进行更有吸引力的颜色选择（紫色，粉红色到黄色而不是泥泞的粉红色）
分层图像和保存图像的动作已经由我的一个朋友用PHP编写。我只是想找出一个客户端的用户界面，而不是在服务器上渲染所有内容。 PHP图像库具有此功能，但是如果有很多用户，它将变得非常缓慢，甚至更糟。因此，我认为Javascript将是处理此问题的最佳方法。不幸的是，我仍然是一个初学者。但是我已经找到了很多资源，但取得了一些成功。
我尝试了Gradientmaps.js，并且能够对其进行设置，使其完全可以完成我想做的事情，即给特定的图像着色并具有我想要的常规用户界面。但是，透明像素看起来好像是黑色的，并且半透明像素都变平了。 (See what it's doing here)
我确实找到了有关Global composite operations的回复，该回复解释了如何使用原始图像作为遮罩，并且我认为这将是我解决该问题的方法。
我只是不确定如何执行此操作。上面的链接需要画布中的所有内容，并且图像通过DOM调用。但是从字面上看，数据库中将保存成千上万张图像，并且并非所有图像都会被一个或另一个用户使用。我认为这不会有效吗？
也许还有另一种裁剪图像的方法？有什么建议，尤其是在速度/效率方面？
谢谢！