Как изменить изображения с помощью JavaScript? - PullRequest
0 голосов
/ 30 августа 2011

Я хотел создать апплет JS для пользователя, чтобы настроить цвет своего продукта перед заказом.

Пример можно увидеть здесь - http://www.lunacommerce.com/diy-ipone4-parts.php

Я не смогнайти код JS на странице.Может ли кто-нибудь руководство о том, как собирается построить этот апплет?У меня есть базовый уровень знаний JS, но я готов изучить все, что требуется для его построения.

Ответы [ 5 ]

0 голосов
/ 30 августа 2011

Если вопрос заключается в том, как изменить изображение с помощью JS на стороне клиента, ответом является использование canvas, https://developer.mozilla.org/en/Canvas_tutorial/Using_images. Вы можете визуализировать изображение и изменить его по своему вкусу, тогда вы можете использовать

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

Затем вы можете отправить это на сервер или открыть новую страницу с ним

0 голосов
/ 30 августа 2011

Прежде всего, в этом «апплете» нет ничего «измененного».

Клиентская сторона будет выполнять вызов Ajax каждый раз, когда вы выбираете новый цвет, и этот вызов ajax возвращает URL-адрес изображения извыбранный цвет.

Вам необходимо знать: что такое вызов Ajax и как он работает на стороне сервера.

Вы можете проверить:

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

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

Вам лучше читать:

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

0 голосов
/ 30 августа 2011

Выбираются другие изображения, а не те, у которых был изменен цвет.

0 голосов
/ 30 августа 2011

Это делается путем соединения телефона множеством маленьких изображений в виде частей. Например, это две домашние кнопки:

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

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

С помощью JavaScript они просто меняют изображения.

0 голосов
/ 30 августа 2011

JavaScript не может быть использован для непосредственного изменения изображений на стороне клиента (кроме, может быть, некоторых canvas решений для фильтров).

Подсказка: изображение на этом сайте может быть полупрозрачным с цветной подсветкой.

...