You can use the HTMLCanvasElement.toBlob function to convert the canvas image into a Blob that you can send through fetch.

.then(function (canvas) {
  canvas.toBlob(blob => {
    fetch("URL", {
      method: 'POST',
      headers: { 'Content-Type': 'image/png' }
      body: blob
    })
  
    const imgSrc = URL.createObjectURL(blob);
    document.getElementById("result").onload = () => URL.revokeObjectURL(imgSrc);
    document.getElementById("result").src = imgSrc;
  }, "image/png", 0.5)
});

i resolved problem like that;

JS;

<script>
      function capture() {
          html2canvas(document.getElementById("main"), {
              letterRendering: 1,
              allowTaint: true,
              useCORS: true,
          })
              .then(function (canvas) {
                  document.getElementById("result").src = canvas.toDataURL("image/png", 0.5);
                  var img = canvas.toDataURL();
                  $.ajax({
                  type: "POST",
                  url: "{% url 'sendtoslack' %}",
                  data: { 
                  "imageData": img,
                  csrfmiddlewaretoken: '{{ csrf_token }}'
                  }
                  
              })
              })
              .catch((e) => {
                  alert(e);
              });
      }
  </script>

view;

image = request.POST.get('imageData')

decoding base64;

import base64

imagestr = str(image)
x = imagestr[22:]
img = Image.open(io.BytesIO(base64.decodebytes(bytes(x, "utf-8"))))