Конвертация img в данные для отправки на сервер

Всем привет, сразу прошу прошения, если ошибся разделом)
В общем вопрос в чем: есть изображенька точнее img тег со своими классами которые накладывают различные эфекты на это изображение. Тут вопросов нет, юзаю в css вебкит фильтры либо svg фильтры в зависимости от браузера. Но встает впорос о том что мне изображение с примененными к нему эффектами нужно отправить на сервер и там его сохранить. Тут и встает вопрос, как это сделать?
Многие советуют использовать канву, т.е. img в канву а канву уже-> canvas.toDataURL(); и отправляем на сервер, НО тут есть но я бы не хотел завязываться на канве, много слышал про её тормознутость... да и сама идея создавать 100500 скрытых элементов меня не прельщает. Хотелось бы как-то обойти эти моменты. Вопрос как?

Добавлено через 1 час 12 минут
Либо как вариант уже используя канву, но я уперся в следующее как из img создать canvas. Имеено используя полученное изображение на не url тобишь src у img....

Добавлено через 20 минут
Продолжая монолог:
1. Из img в канву я разобрался как запилить
2. Как Отправить и принять данный я разобрался.
Файл приходит сохраняется, НО img при создании канвы берется без эффектов... Возвращаемся к первоначальному вопросу как взять содержимое img уже с эффектами?

0

Сообщение от Maj0r как взять содержимое img уже с эффектами?

эффекты накладываются не на изображение, а на тег, в котором это изображение отображается

т.е. содержимое тега остаётся тем же, сам тег меняется (это как зеркало - оно может быть плоским и будет отражать объект без искажений, а может быть кривым - и тогда отражение объекта будет непропорциональным)

0

Эмм а как тогда быть?
Как получить тогда тег?

Добавлено через 7 минут
(Мысли в слух)
Либо создать канву нужного размера положить туда картинку и сверху на канву положить css filter...

Какая-то область фантастики....

0

Сообщение от Maj0r Эмм а как тогда быть? Как получить тогда тег?

тег - это объект браузера, причём объект виртуальный
"получить" тег для сохранения вам по-любому не удастся

0

Maj0r, возможно как то реализовать эти эффекты на канве. Но тут вы ощутите всю ее "тормознутость" ибо тот же метод, который работает с каждым пикселем ( а нам придется именно это делать ) забирает очень много ресурсов, но так вы получите именно то, что хотели. Еще как вариант, отправлять на сервер картинку + список фильтров, которые нужно применить, и перед сохранением уже изменять картинку. Как на это будет реагировать сервер не знаю ( в плане загруженности )

0

Реализовал следующим образом:
1.Беру base64 кладу в html'о
2.При онлооде беру и создаю канву(Да именно канву, хотя не хотел...)
3.Далее юзаю Caman.js (либа эффекты для изображений на конве
4. Для сохранения беру base64 от обработанной канвы, и отправляю на сервер где уже и сохраняю изображеньку.

PS Чуть позже смогу выложить сорцы...

0