title: How can I POST canvas data in javascript?
body: <p>I built a simple project using javascript and FastAPI. I would like to POST canvas image data in javascript to the server(FastAPI).</p>
  <p>But, I get the 422 Unprocessable Entity error</p>
  <pre><code># FastAPI
  @app.post(&quot;/post&quot;)
  async def upload_files(input_data: UploadFile  = File(...)):
       return JSONResponse(status_code = 200, content={'result' : 'success'})
  </code></pre>
  <pre><code>// javascript
  let canvas = document.getElementById(&quot;canvas&quot;);
  let ctx = canvas.getContext(&quot;2d&quot;);
  
  imageData = ctx.getImageData(0, 0, 112, 112);
  fetch(&quot;http://{IP}/post&quot;, {
      method: &quot;POST&quot;,
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
      },
      body: JSON.stringify({
        input_data: imageData,
      }),
    })
      .then((response) =&gt; response.json())
  </code></pre>
  <p>here is my code. I am new one in javascript. so I don't know how can post data to server.
  How can I do? Thanks in advance.</p>