Как я могу манипулировать изображением на сайте?

Question

Я создаю веб-сайт, на котором пользователь может загрузить изображение, а затем повернуть его или переместить на задний план. Окончательная позиция изображения затем записывается каким-либо образом (растровое изображение?) И отправляется с некоторыми результатами формы.

Я немного растерялся относительно того, как это сделать, веб-сайт построен с использованием asp.net, я предполагаю, что то, что я пытаюсь сделать, может быть сделано в Silverlight, javascript, flash, flex или, может быть, html5?

Если кто-нибудь знает лучший способ сделать это или может дать ссылку на ресурс или учебник, я был бы признателен. Я бы предпочел не делать это во флэш-памяти или изгибе, так как я не знаком с ними и у меня не установлены инструменты для их редактирования. Я бы предпочел решение Silverlight или javascript.

Спасибо, п

Answer 1

Я бы порекомендовал сделать это в JavaScript. На высоком уровне вам просто нужен элемент на странице, содержащий ваше изображение, некоторый базовый код, позволяющий пользователю перетаскивать контейнер (большая часть этого доступна предварительно с помощью каркасов, таких как mootools ), и некоторая логика для сохранения конечной позиции элемента после того, как пользователь завершил его позиционирование.

Я не уверен, что вы имеете в виду, сохраняя его как растровое изображение, но я бы рекомендовал просто сохранить координаты смещения x и y элемента из верхнего левого угла его контейнера. Опять же, есть легкодоступные фреймворки, которые сделают для вас почти все вычисления позиционирования.

Вот пример сайта, который реализует перетаскиваемые изображения с постоянным состоянием между сеансами: http://webcomix.no -ip.org

Answer 2

Вы можете сделать это с помощью html5.

Взгляните на тег canvas вместе с этим javascript.

где logo - изображение, context - контекст тега canvas.

    context.clearRect(0, 0, width, height);
    context.setTransform(_m11, _m12, _m21, _m22, _dx, _dy);
    context.drawImage(logo, 0, 0);

Посмотрите на этот пример - http://jsfiddle.net/prowla/Kj3UL/ лучше всего просматривать в Chrome, чтобы использовать новые типы ввода Range, если в FF или IE измените значения в текстовых полях, чтобы манипулироватьimage.

Вы можете сохранить 6 параметров функции setTransform, чтобы сохранить состояние манипуляции с изображением.