Tengo una página html que permite a un usuario tomar una captura de pantalla de su cámara. Esta captura de pantalla se representa en la página con la función de main.js a continuación.

Si hago console.log (imagen), obtengo una etiqueta de imagen con un src en un blob: http que tiene la imagen.

Ahora viene la parte divertida. Quiero publicar esta imagen en mi API en Django Rest Framework.

Básicamente, ¿cómo paso de una imagen de blob a una solicitud de publicación a la API?

Intenté usar $.ajax pero no sé cómo formatear los "datos de blob" para que se acepten para el campo de parámetro "datos:" en ajax.

Tenga en cuenta también que no estoy usando formularios en html, cuando lo hago, la página html se actualiza tan pronto como tomo una captura de pantalla para que la imagen no permanezca en la página.

Si tengo que usar formularios para que esto funcione, házmelo saber e intentaré otro enfoque.

principal.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)

índice.html

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

modelos.py

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

serializador.py

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

vistas.py

 class SaveScreenshot(CreateAPIView): serializer_class = ScreenshotCreateSerializer permission_classes = [AllowAny] def home_view(request): return render(request, 'index.html', {})

lo que probé en 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) { // });