javascript - 产品库 - 该网站如何为每种可能的组合生成图像

Question

你知道这个网站是如何实现图库中的定制效果的吗？当您更改戒指的颜色、 gem 或其他属性时，看起来就像生成了新图像。

http://www.gemvara.com/Round-Blue-Topaz-Sterling-Silver-Ring-by-Gemvara-Essentials/jewelry/v/342899/

(单击“自定义”)

您认为他们对每种可能的组合都有数千张图像吗？或者他们可能使用某些东西来生成它们？

Answer 1

在不检查他们的源代码的情况下，我想说几乎可以肯定他们只是为每个环加载一个单独的图像。图像本身可能是从单个源图形处理而来的(它们看起来非常相似)，但就网站而言，它们是单独的图像。

但是我过去用来获得我想要的任何颜色的图形的一种技术是使用具有透明度的灰度叠加层，并在其后面使用我想要的颜色的纯色背景色。

如果您在要着色的区域中使用带有 Alpha channel 透明度部分的 PNG 图像，则此功能甚至适用于具有专色效果的全彩图像(如示例网站中的图像)。

由于灰色前景，此技术往往会产生看起来像柔和颜色的阴影，并且它仅适用于不需要复杂颜色变化的图像，但它可以工作。

另一方面，对于像该网站上的图像那样的图像，最好为每个产品使用单独的图形。更简单、更容易、更诚实(如果您销售带有该产品照片的产品，如果该图像实际上是真实照片而不是计算机生成的，人们会更信任您)