如何使用 JavaScript 更改图像？
我想构建一个 JS 小程序，供用户在订购前自定义其产品颜色。
可以在此处查看示例 - http://www.lunacommerce.com/diy-ipone4- parts.php
我无法在页面中找到 JS 代码。任何人都可以指导如何构建这个小程序吗？我对 JS 有基本的了解，但我已经准备好学习构建它所需的任何知识。
I wanted to build a JS applet for a user to customize his product color before ordering.
An example can be seen here - http://www.lunacommerce.com/diy-ipone4-parts.php
I was unable to find the JS code in the page. Can anyone guide on how to go about to build this applet? I have a basic level knowledge of JS but I'm ready to learn whatever is required for building this.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这是通过将手机的许多小图像作为零件组装在一起来完成的。例如，有 2 个主页按钮：
http://www.lunacommerce.com /modules/blocklunatopics/media/base/1300875928.png
http://www.lunacommerce.com/modules/blocklunatopics/media/base/1300875939 .png
使用 JavaScript，他们只需更改图像。
This is done by putting together the phone by many small images as parts. For example those are 2 home buttons:
http://www.lunacommerce.com/modules/blocklunatopics/media/base/1300875928.png
http://www.lunacommerce.com/modules/blocklunatopics/media/base/1300875939.png
With JavaScript they just change the images.
JavaScript 不能用于直接修改客户端图像（除了一些由
canvas驱动的过滤器解决方案）。提示：该网站上的图像可能是半透明的，带有彩色背层。
JavaScript cannot be used to modify client-side images directly (except, maybe some
canvas-powered solutions for filters).Hint: the image on that site could be semi-transparent with a colored backlayer.
这是选择了不同的图像，而不是改变了颜色。
It's different images being selected, rather than one having its colour changed.
首先，这个“小程序”中没有任何内容被“改变”。
每次您选择新颜色时，客户端都会执行 Ajax 调用，并且此 ajax 调用将从所选颜色返回图像 url。
您需要了解：什么是 Ajax 调用以及它如何与服务器端配合使用。
您可以检查：
http://www.w3schools.com/ajax/default.asp
http://api.jquery.com/jQuery.ajax/
你最好阅读：
http://en.wikipedia.org/wiki/JavaScript
First of all, nothing is 'alter' in this 'applet'.
The client side will do an Ajax call each time you select a new color and this ajax call will return an image url from the choosen color.
You need to know: What is an Ajax call and how it works with the server side.
You can check:
http://www.w3schools.com/ajax/default.asp
http://api.jquery.com/jQuery.ajax/
You better read:
http://en.wikipedia.org/wiki/JavaScript
如果问题是如何使用客户端 JS 修改图像，答案是使用画布， https:// /developer.mozilla.org/en/Canvas_tutorial/Using_images。您可以在其中渲染图像并根据您的喜好修改它，然后您可以使用
您可以将其发送到服务器或用它打开一个新页面
If the question is how to modify an image with client side JS, the answer is using canvas, https://developer.mozilla.org/en/Canvas_tutorial/Using_images. You can render an image in it and modify it to your liking, then you can use
You can then send that to the server or open a new page with it