Передача блоб-изображения в django rest framework с помощью ajax

У меня есть html-страница, которая позволяет пользователю сделать снимок экрана с камеры. Этот снимок экрана затем отображается на странице с помощью функции из main.js, приведенной ниже.

Если я делаю console.log(image), я получаю тег изображения с src на blob:http, который содержит изображение.

Теперь о самом интересном. Я хочу отправить это изображение на мой api в django rest framework.

В принципе, как мне перейти от изображения в блобе к запросу post к api?

Я пытался использовать $.ajax, но я не знаю, как форматировать "blob data", чтобы принять его для поля параметра "data:" в ajax.

Обратите внимание, что я не использую формы в html, когда я делаю это, html страница обновляется, как только я делаю скриншот, поэтому изображение не остается на странице...

Если мне придется использовать формы, чтобы заставить это работать, пожалуйста, дайте мне знать, и я попробую другой подход.

main.js

async function grabFrame() {
  const img = await imageCapture.grabFrame();

  const url = URL.createObjectURL(await imageCapture.takePhoto());
  document.querySelector("img").src = url

  #id_image is where the screenshot is located
  const image = document.getElementById('id_image')
  console.log(image)

index.html

<button onclick="grabFrame()">Grab Frame</button>
<img id="id_image" style="width:320px; height:240px"/>

models.py

class Image(models.Model):
    image = models.ImageField(upload_to='media/')

serializer.py

class ScreenshotCreateSerializer(ModelSerializer):
    class Meta:
        model = Image
        fields = [
            'image'
        ]

views.py

class SaveScreenshot(CreateAPIView):
    serializer_class = ScreenshotCreateSerializer
    permission_classes = [AllowAny]


def home_view(request):
    return render(request, 'index.html', {})

что я пробовал в main.js

// $.ajax({
  //   url: "/api/save_screenshot",
  //   type: "POST",
  //   processData: false,
  //   mimeType: "multipart/form-data",
  //   contentType: false,
  //   data: blob data?,
  //   success: function (data) {
  //          alert("Screenshot saved successfully!");
  //   },
  //   error: function (e) {
  //       console.log(e);
  //   }
  //   }).done(function(o) {

  //  });

Вернуться на верх