Me da este error “data = json.loads(request.body.decode(‘utf-8’))” al querer cargar un json traido de un js con django. Es para un proyecto escolar 🙁
El codigo recibe una foto tomada por el navegador y la guarda y el error aparece al recibir el post por parte del html
Aqui el codigo del view del proyecto.
from django.shortcuts import render
from django.http import JsonResponse
import json
import base64
import os
import logging
from random import randint
logging.basicConfig(level=logging.DEBUG)
def Inicio(request):
if request.method == 'POST':
data = json.loads(request.body.decode('utf-8'))
image_url = data.get('image_url', '')
# Guarda la imagen físicamente en la carpeta de medios
guardar_imagen_fisicamente(image_url)
return JsonResponse({'message': 'Imagen recibida y guardada con éxito.'})
return render(request, 'plantilla1.html')
def guardar_imagen_fisicamente(image_url):
# Decodifica la imagen base64
image_data = image_url.split(",")[1]
image_binary = base64.b64decode(image_data)
# Guarda la imagen en la carpeta de medios
ruta_carpeta = 'capturas'
ruta_completa = os.path.join('media', ruta_carpeta, generar_nombre_imagen())
ruta_completa = os.path.join("C:/myproject/myproject/", ruta_completa)
with open(ruta_completa, 'wb') as f:
f.write(image_binary)
def generar_nombre_imagen():
n = randint(0,999999999)
nombre_imagen = f"imagen_{n}.png"
return nombre_imagen
Cosas como url y settings estan bien, ya esta revisado pero me da error en cuando quiero obtener la data, y es que me explota
enter image description here
Inexperadamente si me toma la foto, es decir si hace lo que quiero que haga, es raro
aqui el html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Captura de Imagen</title>
<!-- Agrega aquí tus enlaces a jQuery o a otras bibliotecas si es necesario -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<form method="post" action="/Inicio/">
{% csrf_token %}
<div>
<video id="camera-preview" width="640" height="480" autoplay></video>
<button id="capture-btn">Capturar Imagen</button>
<div id="image-url-container">URL de la imagen: </div>
</div>
</form>
<script>
//var nombreImagen; // Variable para almacenar el nombre de la imagen
var imageURL; // Variable para almacenar la URL de la imagen capturada
// Acceder a la cámara y mostrar la vista previa
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
var video = document.getElementById('camera-preview');
video.srcObject = stream;
video.play();
})
.catch(function (err) {
console.error('Error al acceder a la cámara:', err);
});
// Capturar la imagen y almacenar la URL
var captureBtn = document.getElementById('capture-btn');
captureBtn.addEventListener('click', function () {
var video = document.getElementById('camera-preview');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
imageURL = canvas.toDataURL('image/png');
document.getElementById('image-url-container').innerText = 'URL de la imagen: ' + imageURL;
alert('Imagen capturada con éxito.');
var csrfToken = document.cookie.match(/csrftoken=([^;]+)/)[1];
// Obtener el token CSRF del formulario
var csrfToken = document.getElementsByName('csrfmiddlewaretoken')[0].value;
// Realizar la solicitud POST incluyendo el token CSRF
fetch('/Inicio/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken,
},
body: JSON.stringify({ image_url: imageURL}),
})
.then(response => {
if (!response.ok) {
throw new Error(`La solicitud falló con estado: ${response.status}`);
}
return response.json();
})
.then(data => {
console.log('Respuesta del servidor:', data);
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</body>
</html>
Si se puede arreglar se lo agradecería mucho
Si alguien lo arregla se lo agradecería mucho, por favor y gracias
