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

时间:2011-07-05 08:02:18

标签: javascript html5 3d vml

您知道这个网站如何在图库中实现自定义效果吗?当您更改戒指的颜色,宝石或其他属性时,它看起来就像是生成了新图像。

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

(点击自定义)

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

1 个答案:

答案 0 :(得分:2)

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

但是我过去使用的一种技术是使用我想要的任何颜色的图形,使用具有透明度的灰度覆盖,以及我想要的颜色背后的纯色背景。

如果您在要着色的区域中使用带有Alpha通道透明度部分的PNG图像,即使对于具有斑点效果颜色的全色图像(与示例网站中的图像一样),这也可以使用。 / p>

由于灰色前景,这种技术倾向于产生看起来像柔和色彩的色调,并且它仅适用于不需要复杂颜色变化的图像,但它可以工作。

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