Как отправить на серевер картинку, если она base64?

Question

[Илья Белобородов]

Есть страница с формой. есть <input type="submit"> в котором выбирается картинка, далее, эта картинка кропается через плагин jquery, это плагин возвращает картинку в формате base64.
Как-то так:

2CiVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAYAAACI7Fo9AAAgAElEQVR4Xoy9C6x2bVoe9Kz3sP

Как отправить на сервер и сохранить?

Comments

[romy4]

не позорьте звание php developer. ужас.

[Илья Белобородов]

romy4: вместо того, что бы реплики кидать - помоги

[romy4]

Илья Белобородов: нет

[Илья Белобородов]

romy4: так тули отсюда

[romy4]

Илья Белобородов: я тебе щас потулю, молокосос ты

Answer 1

[Илья Белобородов]

Всем спасибо.
Я хотел получить вот такой ответ

$img= base64_decode('iVBORw0KGgoAAAA...');
$fpng = fopen("img.png", "w");
fwrite($fpng,$img);
fclose($fpng);

Answer 2

[Алексей Дугнист]

var image;

image = $('#image').attr('src').split(',');

$.ajax({
  type: "POST",
  dataType: "json",
  data: {
    image: image[1]
  },
  url: 'http://site.com',
  success: function(res) {
    return console.log(res);
  }
});

На сервере принять через $_POST["image"]

Comments

[romy4]

решай за нуба. он никогда не поймёт как это работает и будет клянчить решения по всем форумам

[Алексей Дугнист]

romy4: честно говоря, самому иногда хочется таких обширных ответов, а не пару ключевых слов и ссылку на гугл, как Вы любите делать...

[romy4]

Алексей Дугнист: тут принципиальная разница: я объясняю давая понять нубу пошагово что ему надо сделать, чтобы достичь результат, а вы даёте сразу готовый ответ, без объяснения что и как он делает. вот типа решает и всё. в итоге нуб опять задаёт тучу вопросов не думая над решением, потому что за него всё решат

[Алексей Дугнист]

romy4: "я объясняю давая понять нубу пошагово что ему надо сделать"...
Да, я видел - "я тебе щас потулю, молокосос ты"...
Это его дело что делать с полученной информацией...
П.С - приличные программисты не используют слово "нуб" по отношению к новичкам...

[romy4]

Алексей Дугнист: это коммент касается конкретно этого нуба, который зарывается сходу, мол ему все должны тут.

Answer 3

[Дима Паутов]

Скрытый input в значение которого вставлять код картинки!
Потом сохраняете полученную строку в бд, а дальше просто выводите так
<img src="data:image/png;base64,<?img?>">
Где переменная $img - это код картинки. Но ваш плагин как-то не правильно переводит картинку или вы скинули не весь код. Где указание формата вначале, например так: data:image/png;base64,?

Comments

[Илья Белобородов]

И? Отправляется постом строка 2CiVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAYAAACI7Fo9AAAgAElEQVR4Xoy9C6x2bVoe9Kz3sP и что с ней делать?

[Дима Паутов]

Илья Белобородов: обновил ответ

[Виталий Хоменко]

> Где указание формата вначале, например так: data:image/png;base64,?

Это необязательно. Строка data:image/png;base64, нужна лишь для отображения изображения в браузере. Для сохранения в файл она не нужна.

[Дима Паутов]

Виталий IIIFX Хоменко: я написал для вывода!!!!!

[Виталий Хоменко]

Дима Турков: А автор хочет сохранить ;)

[Дима Паутов]

Виталий IIIFX Хоменко: Вы читаете мой ответ полностью? или частями? Я написал "Потом сохраняете полученную строку в бд, а дальше просто выводите так"!!!!!!!

[Виталий Хоменко]

Дима Турков: Нет конечно, не читаю. И кричать не нужно, экономьте знаки восклицания ;)

И да, сохранять изображение строкой base64 в БД это плохая практика.

[Дима Паутов]

Виталий IIIFX Хоменко: Это уже другой вопрос. Так и нужно было писать!

Answer 4

[Сергей Протько]

что мы имеем - мы имеем картинку закодированную в base64. Что с ней делать? Логика подсказывает что мы должны сделать base64decode и сохранить этот кусок бинарных данных в файл (jpg/png - зависит от того во что этот плагин сохраняет).

Answer 5

[Александр Кубинцев]

Что-то в алгоритме загрузки кропнутого изображения не так.
Должно быть:

1) <input type="file"... откуда можно взять переменную для передачи файла
2) плагин для кропа, который должен вернуть координаты выделения

Эти данные и отправляются на сервер.

А чтобы кропать можно было по изображению без загрузки на сервер - javascript-овый FileReader в помощь.
Вот пример (немного говнокода, но в целом понятно):
- frontend: с 215-й строки https://github.com/kryoz/sociochat/blob/master/www...
- backend: https://github.com/kryoz/sociochat/blob/master/www...

Ваш же подход связан с гемором разбора данных на серверной стороне. Лучше использовать штатные инструменты.