我有 8 张鞋子的 png 图片；每 45 度一个。我希望能够用不同的颜色定制这款鞋，并让用户能够将鞋子旋转 360 度，显示用户在鞋子周围选择的任何自定义颜色。我的问题是，这是否意味着我需要在每个不同的角度为每种不同的颜色提供不同的图像？这似乎是一个荒谬的图像数量，特别是如果除了颜色之外还添加了更多可定制的选项。我想知道是否有任何东西可以帮助简化这一目标，以避免根据选择的角度和自定义选项加载和交换一百万张图像，我非常想知道，更有经验的人会如何解决这个问题。
感谢您的建议。
【问题讨论】：
标签： javascript css-transforms image-rotation
我不完全确定您的鞋子使用什么颜色，但您可以执行以下操作。如果你有一双颜色#999和一个#7B5的鞋子，你可以简单地拍摄8张不同颜色的照片，使背景不透明，然后去除所有特定颜色的部分，制作那些透明的，然后更改图像的background-colour 样式。
This demo 使用原始图像 http://www.selectism.com/files/2013/05/wtaps-canvas-sneakers-02.jpg (imgur link in case that one 404s)，并使用色度键（绿屏）效果从中删除颜色 #39476A，可在任何专业的照片编辑器（photoshop、GIMP）中使用。由于背景是不透明的，因此在其后面放置一种颜色将仅在图像上填充该颜色，从而产生您想要的效果。
当您获得 Chroma Keyed 图像后，您只需根据用户选择的颜色在 <img> 标签上放置 background-color 样式，它就会显示为已选择。
【讨论】：