动态更改图像颜色区域的建议
我正在构建一个在线工具，人们可以通过选择各种零件（车架、前叉、座椅等）的颜色来“建造他们的自行车”。我从带有白色框架和黑色组件的自行车的干净 JPG 图像开始。我正在寻找关于采取哪种技术路径的一些指导。一些选项是：
- 具有 alpha 透明度的 PNG，将背景图像放置在各个区域上。
- 将 JPG 转换为 SVG 并使用 JS 库执行颜色转换
- 使用 Raphael-JS 绘制图像
我已经使用 Raphael 进行了最广泛的测试，但我不太明白这一切是如何组合在一起的。他们的邮件列表中的一位好心人提供了非常好的概念证明（请参阅此处），但生成的代码与服务器上的 ajax 调用相关联以呈现结果，因此我无法真正在本地重现结果。
最终目标是让自行车在应用不同颜色时看起来更逼真。如果有人知道类似项目的示例，其中使用 JavaScript 调整逼真图像的颜色区域，我将不胜感激。
I'm building an online tool where a person can "build their bike" by selecting colors for various parts (frame, fork, seat, etc). I'm starting with a clean JPG image of the bike with a white frame and black components. What I'm looking for a little bit of guidance about which technical path to take. Some options are:
- PNG with alpha transparency, place background images over various regions.
- Convert my JPG to SVG and perform color transformation with a JS library
- Use Raphael-JS to draw over the image
I've done my most extensive testing with Raphael, but I don't quite see how it all can come together. A kind person on their mailing list provided a very good proof of concept (see here) but the resultant code is tied to ajax calls on their server to render the result, so I can't really reproduce the result locally.
The end goal is for the bike to look realistic with different colors applied. If anyone knows of examples of similar projects where colors regions of realistic images are adjusted with JavaScript I would be most grateful.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
另一个选择是 HTML 5 画布。除 Internet Explorer 之外的所有浏览器都支持它（IE 9 也支持它）。使用canvas标签，您可以对图像进行自己的像素操作。
但如果你有逼真的图像，那么我想你使用由优秀设计师创建的 alpha 透明 PNG 并将它们分层以切换颜色会得到更好的结果。
如果您不知道 canvas 标签，那么您可以在这里找到一个很好的教程：
https://developer.mozilla .org/en/canvas_tutorial
Another option is the HTML 5 canvas. All browsers except Internet Explorer support it (IE 9 supports it, too). With the canvas tag you can do your own pixel-operations on an image.
But if you have photorealistic images then I guess you will have better results with using alpha-transparent PNGs created by good a designer and layer them on top to switch colors.
If you don't know the canvas tag then you can find a nice tutorial here:
https://developer.mozilla.org/en/canvas_tutorial
我的第一个倾向是使用 SVG，可能使用 Raphael（它使用 SVG）。如果它可以工作，那么已经可以完成您想要的操作的较高级别的库应该比较低级别的图像改组节省大量时间。
希望您能够采用给定的概念证明并更改依赖于 ajax 的部分，对吧？
如果没有，使用透明 PNG 也是一个不错的选择，前提是 PNG 是静态的。但您可能知道，IE 6 无法处理 alpha PNG，但仍然拥有很大的市场份额。
My first inclination would be to go with SVG, probably using Raphael (which uses SVG). If it can be made to work, a higher-level library that already does what you want should save you significant time over lower-level image shuffling.
Hopefully you can take the given proof of concept and change the ajax-dependent parts, right?
If not, using transparent PNGs is also a good option, provided the PNGs are static. But as you may know, IE 6 can't handle alpha PNGs, and still has significant market share.