Создание / изменение изображений в JavaScript

Question

Возможно ли динамически создавать и изменять изображения на на уровне пикселей в JavaScript (на стороне клиента)? Или это должно быть сделано с использованием языка на основе сервера, такого как PHP?

Мой пример использования следующий:

• Пользователь открывает веб-страницу и загружает локально сохраненное изображение
• Предварительный просмотр изображения отображается
• Пользователь может изменять изображение с помощью набора ползунков (операции на уровне пикселей)
• В конце концов он может загрузить изображение на свой локальный жесткий диск

При поиске в Интернете я только нашел сообщения об использовании метода фильтрации IE, но ничего не нашел о функциях редактирования изображений в JavaScript.

Answer 1

Некоторые браузеры поддерживают холст: http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas

Answer 2

Вы можете проверить Processing.js . Джон Резиг из JQuery славы написал это. Он поддерживает обработку пикселей, к сожалению, только Firefox 3 может справиться с этим в достаточной степени.

Answer 3

Также посмотрите на URI данных (хотя версии IE ниже 8, к сожалению, их не поддерживают!)

Answer 4

Это должно быть сделано на стороне сервера. Одна вещь, на которую вы могли бы обратить внимание, - это разрешить все редактирование идти на стороне клиента, а затем, в конце, отправить окончательное изображение (через AJAX) на сервер, чтобы оно могло вернуть его вам как правильный тип MIME и упаковано.

Answer 5

Локальные манипуляции с изображениями в JavaScript должны быть возможны - взгляните на Защитник Фавикон . ;-) Вопрос в том, как получить исходное изображение из файловой системы на вашу страницу (я не знаю другого способа, кроме как сначала выполнить HTTP-загрузку на сервер).

Answer 6

Попробуйте Ретаргетер изображений Allicorn - похоже, это то, что вы ищете.

Answer 7

Можно представить набор инструментов JS, которые позволят пользователю определить, какой тип преобразования он хочет выполнить, но окончательная работа преобразования ДОЛЖНА быть выполнена на стороне сервера. JS на стороне клиента не может создать файл по соображениям безопасности.