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

Question

[hollanditkzn]

Не могу понять как получить уже отредактированное фото на сервер. То есть есть определенный редактор изображение использовался js и для текста canvas. У меня стал вопрос, как взять все редактированные данные и сохранить их на сервер. Там в редакторе пользователь может добавить дополнительное изображение, типо 2 слоя, добавить текст ну и конечно изменить его, повернуть изображение или изменить масштаб.
Если это делать на base64 то вопрос, как получить все данные изображение с него, когда код не знает как пользователь сможет изменить изображение.
Вот пример полностью кода как выглядит https://jsfiddle.net/hollanditkzn/fguqm63v/
Или второй момент переписать весь редактор на canvas?

Answer 1

[Александр Коротаев]

Я так полагаю тут суть в передаче заказа на печать, а значит нужно приемлемое качество, а значит base64 отпадает сам собой (генерация base64 для формата А4 вызовет зависание на клиенте). Манипуляций тут не так уж много потому можно просто передавать их как обычную форму а финальное изобаржение строить уже на сервере, можно даже с серевера и превью отдавать, чтобы не поддердивать 2 типа визуализации

Comments

[hollanditkzn]

Александр Коротаев Как понимаю, весь этот редактор сделать как большую форму, верно?. Просто где оформление заказа, там модальное окно открывается
И все name передать параменты как понимаю?

[hollanditkzn]

Александр Коротаев да, тип, цвет, размер, это все как понимаю я буду получать из jquery типо $("#id").val();? Верно я мыслю?

[Александр Коротаев]

hollanditkzn: можно проще, обычную html form и там инпуты с именами, если надо без перезагрузки страницы, то повесить на форму обработчик submit

[hollanditkzn]

Александр Коротаев: уточню один момент, type в input какой примерно выбирать в данном случае?

[hollanditkzn]

Александр Коротаев: И у меня где выбор цвета идет как input type=radio, и там не получится, чтобы имена были другие

[hollanditkzn]

Александр Коротаев: И примерно чтобы посмотреть наглдно, то редактор находится на сайте holland-store.ru , надо нажать на ".", около кнопки "Попробовать бесплатно". Там наглядный пример этого редактора. Просто с инпутами немного мне не понятно, как получать от некоторых имя и какой тип для некоторых выбирать

[Александр Коротаев]

hollanditkzn: придется читать htmlbook.ru/html/input/type я тут в паре слов не объясню

[hollanditkzn]

Александр Коротаев: Я попробовал форму добавить, у меня само изображение не загружает

[Александр Коротаев]

hollanditkzn: надо атрибут прописать в форму чтобы файл отправлялся htmlbook.ru/html/form/enctype

[hollanditkzn]

Александр Коротаев: как я понимаю типо enctype

[hollanditkzn]

Александр Коротаев: все понял

[hollanditkzn]

с инпутами только немного не понятно, как получать их, если только как ajax получать и отправлять данные на сервер

[Александр Коротаев]

hollanditkzn: есть объект FormData, которому можно отдать вашу html form и он сам отдаст объект, который можно будет отправить на сервер и который будет содержать все поля

[hollanditkzn]

Александр Коротаев только не получается реализовать одновременно выгрузка изображение на сайте, чтобы пользователь смог его редактировать и отправить его на сервер. А как я понял получается то что при форме он отправляет на форму сразу. Если я не догнал, то примерно можешь как код должен строиться

[Александр Коротаев]

hollanditkzn: очень косноязычно написано я не понял что именно не вышло сделать

[hollanditkzn]

Александр Коротаев: Если делать форму и присвоить атрибут, то перестает загружатся изображение насайте, чтобы пользователь мог его редактировать. Чтобы наглядно посмотреть вот сайт holland-store.ru , чтобы на редактор попасть нужнол нажать на точку находящяя справа от кнопки попробовать бесплатно

[hollanditkzn]

Александр Коротаев: Там изображение как понимаю сразу идет в форму, но не дает ее подвигать , изменить изображение и т.д.

[hollanditkzn]

Александр Коротаев Вопрос как финальное изобаржение строить уже на сервере,

[Александр Коротаев]

hollanditkzn: методами для рисования в том языке, на котором этот серверный скрипт написан

[hollanditkzn]

Александр Коротаев: немного не понял. То есть в php использовать Imagick верно?

[hollanditkzn]

Александр Коротаев: То есть перерисовать?

[Александр Коротаев]

hollanditkzn: в php можно и просто стандартной библиотекой для работы с картинками нариосвать такой коллажа как у вас в задаче, но можно и ImageMagic, кому что ближе

[hollanditkzn]

Александр Коротаев: просто что посоветовали то я использую, а есть еще простые библеотеки?

[Александр Коротаев]

hollanditkzn стандартная GD php.net/manual/en/ref.image.php

[hollanditkzn]

Александр Коротаев: Вопрос задам один, а можно ли не собирать изображение, а получить скриншота экрана? просто вопрос стоит, когда изучал сервера, что изменяет он экран, а по api делает скриншот по ссылки, или это можно реализовать также в gd используя

[hollanditkzn]

Александр Коротаев: Или лучше собирать потому что функция imagegrabscreen работает только для windows

[hollanditkzn]

а если linux и mac то будет проблема будет как понимаю