Отправка изображения canvas на сервер PHP?

Question

[Дмитрий А.]

Имеется canvas с определенным изображением, необходимо данный canvas отправить на сервер PHP. На сервере данные преобразовать в картинку (не отдавать обратно и далее с картинкой работаю на сервере)

<canvas id="canvasElem" width="200" height="120" style="border:1px solid"></canvas>
	<button type="submit" id="btn_send">Отправить</button>

canvasElem.addEventListener('mousemove', (e)=>{
      let ctx = canvasElem.getContext('2d');
      ctx.lineTo(e.clientX, e.clientY);
      ctx.stroke();
});

btn_send.addEventListener('click',async() => {
		let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
		let response = await fetch('web_tp_word.php', {
		method: 'POST',
		body: blob});
		console.log(blob);
});

Вопрос, правильно ли я отсылаю данные, и как их получить в PHP?
Заранее всем спасибо!

Answer 1

[alexalexes]

btn_send.addEventListener('click',async() => {
    let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
    let formData = new FormData(); // Создаем объект формы для наполнения данными, словно мы работаем с тегом form в html.
    formData.append('canvas_field', blob, 'canvas.png'); // это эквивалент тому, что в нашей html форме создаем поле input type="file" name="canvas_field" value="canvas.png" и прикрепляем туда содержимое blob (метод append сам расшаривает blob, дополнительных преобразований не требуется). Естественно, на DOM-дереве это никак не отразится, это модель формы в памяти JS.
    let response = await fetch('web_tp_word.php', {
    method: 'POST',
    body: formData // для fetch не нужно дополнительных параметров, чтобы объяснить как работать с formData. Идеально, чтобы завернуть файл в форму и отправить на сервер.
    });
});

На стороне сервера:

var_dump($_FILES['canvas_field']); // Сервер при вызове скрипта сложит данные файла во временный файл, а как их получить - в $_FILES. Далее можно обрабатывать всеми теми способами, предназначенные для работы с $_FILES. И после уже неважно, как их сгенерировали на клиенте.

Comments

[Дмитрий А.]

Спасибо!