如何使用JavaScript更改图像？

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

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

You can then send that to the server or open a new page with it