建议动态更改图像颜色区域

我正在构建一个在线工具，人们可以通过为各种部件（框架，叉子，座位等）选择颜色来“构建自行车”。我开始使用白色框架和黑色组件的干净的JPG图像。我正在寻找一些有关采取哪种技术路线的指导。一些选项是：建议动态更改图像颜色区域

PNG具有alpha透明度，将背景图像放置在各个区域。
我转换至JPG SVG和与JS库
使用拉斐尔-JS进行色彩转换绘制在图像

我已经做了我的拉斐尔最广泛的测试，但我不相当了解它是如何汇合在一起的。一个善良的人在他们的邮件列表中提供了一个非常好的概念验证（see here），但结果代码与服务器上的ajax调用相关联以呈现结果，因此我无法真正地在本地重现结果。

最终目标是让自行车看起来逼真，适用不同的颜色。如果有人知道类似项目的例子，用JavaScript调整真实图像的颜色区域，我将非常感激。

来源

2011-02-02 Duane Gran

另一种选择是HTML 5画布。除Internet Explorer之外的所有浏览器都支持它（IE 9也支持它）。使用画布标签，您可以在图像上进行自己的像素操作。

但是，如果你有照片真实感的图像，那么我想你会得到更好的结果，使用好的设计师创建的alpha透明PNG，并将它们置于顶层切换颜色。

如果你不知道canvas标签，那么你可以在这里找到一个很好的教程：

https://developer.mozilla.org/en/canvas_tutorial

来源

2011-02-02 16:57:27 kayahr

感谢您的建议。我应该提到我考虑过画布，但我担心它可能没有足够宽的浏览器支持。但是根据这个标准，原生SVG也不存在这个问题。 – 2011-02-02 19:16:30

@Duane Gran：从来没有真正在浏览器中使用SVG，但据我所知情况是一样的。所有主流浏览器都支持它，除了Internet Explorer（IE 9也是例外）。但很可能我们必须支持IE 7和IE 8等浏览器多年，所以canvas和SVG一直是个问题。所以这是坚持alpha-PNG的另一个好理由。 – kayahr 2011-02-02 19:33:08

我的第一个倾向是去与SVG，可能使用拉斐尔（使用SVG）。如果可以开展工作，那么已经做好你想做的事情的更高级别的图书馆应该可以为你节省大量的时间，而不是在较低级别的图像混洗中。希望你可以采取给定的概念证明，并改变依赖Ajax的部分，对吧？

如果不是，使用透明PNGs也是一个不错的选择，只要PNG是静态的。但正如你可能知道的那样，IE 6无法处理alpha PNG，并且仍然占有相当大的市场份额。

来源

2011-02-02 18:08:40 LarsH

建议动态更改图像颜色区域

回答

相关问题