Sending canvas image to PHP server?

Question

PHP

There is a canvas with a specific image, you need to send this canvas to the PHP server. On the server, convert the data into a picture (do not give it back and then I work with the picture on the server)

<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);
});

The question is, am I sending the data correctly, and how can I get it in PHP?
Thank you all in advance!

Answer 1

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. Идеально, чтобы завернуть файл в форму и отправить на сервер.
    });
});

On the server side:

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