Создание / изменение изображений в JavaScript
Возможно ли динамически создавать и изменять изображения на на уровень пикселя в JavaScript (на стороне клиента)? Или это нужно делать с помощью серверного языка, такого как PHP?
Мой вариант использования выглядит следующим образом:
- Пользователь открывает веб-страницу и загружает локально сохраненное изображение.
- Отображается предварительный просмотр изображения.
- Пользователь может изменять изображение с помощью набора ползунков (операции на уровне пикселей).
- В конце концов, он может загрузить образ на свой локальный жесткий диск.
При поиске в сети я только что нашел сообщения об использовании метода фильтрации IE, но не нашел ничего о функциях редактирования изображений в JavaScript.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Это нужно делать на стороне сервера. Одна вещь, которую вы можете сделать, - это разрешить все редактирование на стороне клиента, а затем, в конце, отправить окончательное изображение (через AJAX) на сервер, чтобы он мог вернуть его вам как правильный тип MIME и правильно упакованы.
Некоторые браузеры поддерживают холст: http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas
Спасибо за все комментарии. Подводя итог, похоже, есть решения для некоторых браузеров (например, Firefox). Однако решение для всех браузеров, похоже, требует реализации на стороне сервера.
Вы можете представить себе набор инструментов JS, которые позволят пользователю определить, какое преобразование он хочет выполнить, но окончательная работа по преобразованию ДОЛЖНА выполняться на стороне сервера. JS на стороне клиента не может создать файл по соображениям безопасности.
Попробуйте Ретаргеттер изображений Allicorn - похоже, это то, что вы ищете.
Должна быть возможна локальная обработка изображений в JavaScript - взгляните на Защитник фавикона. ;-) Вопрос в том, как загрузить исходное изображение из файловой системы на вашу страницу (я не знаю другого способа, кроме как сначала выполнить HTTP-загрузку на сервер).
Вы можете проверить Processing.js. Это написал Джон Ресиг, известный по jQuery. Он поддерживает обработку пикселей, но, к сожалению, только Firefox 3 может с этим справиться.
Также посмотрите URI данных (хотя версии IE ниже 8, к сожалению, их не поддерживают!)
спасибо, что поставили меня на это нашел отличный праймер в этом ответе stackoverflow.com/a/6634646/1382306, ваш ответ должен получить chk