如何用JavaScript改变图像？

Question

我想为用户构建一个JS applet，以便在订购之前自定义他的产品颜色。

这里可以看到一个例子 - http://www.lunacommerce.com/diy-ipone4-parts.php

我无法在页面中找到JS代码。任何人都可以指导如何构建这个小程序？我对JS有基本的知识，但我已经准备好了解构建它所需的一切。

Answer 1

JavaScript不能直接用于修改客户端图像（除了一些canvas - 用于过滤器的解决方案）。

提示：该网站上的图片可以是半透明的，带有彩色背板。

Answer 2

选择了不同的图像，而不是更改颜色的图像。

Answer 3

这是通过将许多小图像作为部件组合在一起来完成的。例如，这些是2个主页按钮：

http://www.lunacommerce.com/modules/blocklunatopics/media/base/1300875928.png

http://www.lunacommerce.com/modules/blocklunatopics/media/base/1300875939.png

使用JavaScript，他们只需更改图像。

Answer 4

首先，这个“小程序”中没有任何“改变”。

每次选择新颜色时，客户端都会执行Ajax调用，此ajax调用将从选择的颜色返回图像URL。

您需要知道：什么是Ajax调用以及它如何与服务器端协同工作。

您可以查看：

http://www.w3schools.com/ajax/default.asp

http://api.jquery.com/jQuery.ajax/

你最好阅读：

http://en.wikipedia.org/wiki/JavaScript

Answer 5

如果问题是如何使用客户端JS修改图像，答案是使用canvas https://developer.mozilla.org/en/Canvas_tutorial/Using_images。您可以在其中渲染图像并根据自己的喜好进行修改，然后您可以使用

var strDataURI = canvas.toDataURL(); 
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

然后您可以将其发送到服务器或用它打开新页面