125 lines
4.2 KiB
HTML
125 lines
4.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Transfert d'image vers ESP32</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Transfert d'image vers ESP32</h1>
|
||
|
|
|
||
|
|
<form id="imageForm">
|
||
|
|
<input type="file" id="imageInput" accept="image/*">
|
||
|
|
<input type="submit" value="Envoyer">
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div id="result">
|
||
|
|
<!-- L'image convertie en tableau C sera affichée ici -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const form = document.getElementById("imageForm");
|
||
|
|
const input = document.getElementById("imageInput");
|
||
|
|
|
||
|
|
input.addEventListener("change", function () {
|
||
|
|
const file = input.files[0];
|
||
|
|
|
||
|
|
if (file) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
const chunkSize = 1024; // Taille du paquet (en octets)
|
||
|
|
|
||
|
|
reader.onload = function(event) {
|
||
|
|
const image = new Image();
|
||
|
|
image.src = event.target.result;
|
||
|
|
|
||
|
|
image.onload = function() {
|
||
|
|
const canvas = document.createElement("canvas");
|
||
|
|
canvas.width = 480;
|
||
|
|
canvas.height = 480;
|
||
|
|
const context = canvas.getContext("2d");
|
||
|
|
|
||
|
|
context.drawImage(image, 0, 0, 480, 480);
|
||
|
|
|
||
|
|
const imageData = context.getImageData(0, 0, 480, 480).data;
|
||
|
|
const outputArray = [];
|
||
|
|
|
||
|
|
for (let i = 0; i < imageData.length; i += 4) {
|
||
|
|
const r = imageData[i];
|
||
|
|
const g = imageData[i + 1];
|
||
|
|
const b = imageData[i + 2];
|
||
|
|
const rgb565 = ((r >> 3) << 11) | ((g >> 2) << 5) | (b >> 3);
|
||
|
|
outputArray.push(`0x${rgb565.toString(16).toUpperCase()}, `);
|
||
|
|
}
|
||
|
|
|
||
|
|
const resultDiv = document.getElementById("result");
|
||
|
|
resultDiv.innerHTML = `<h2>Image convertie en tableau C :</h2><pre id="completeData">${outputArray.join("")}</pre>`;
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
form.addEventListener("submit", function (event) {
|
||
|
|
event.preventDefault(); // Empêche l'envoi du formulaire
|
||
|
|
|
||
|
|
const completeData = document.getElementById("completeData").textContent;
|
||
|
|
const chunkSize = 1024*4; // Taille du paquet (en octets)
|
||
|
|
const chunks = chunkString(completeData, chunkSize); // Divisez les données en paquets
|
||
|
|
|
||
|
|
// Fonction pour diviser une chaîne de caractères en morceaux de taille donnée
|
||
|
|
function chunkString(str, size) {
|
||
|
|
const chunks = [];
|
||
|
|
for (let i = 0; i < str.length; i += size) {
|
||
|
|
chunks.push(str.slice(i, i + size));
|
||
|
|
}
|
||
|
|
return chunks;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Ajoutez "Begin" au début et "End" à la fin
|
||
|
|
chunks.unshift("Begin");
|
||
|
|
chunks.push("End");
|
||
|
|
|
||
|
|
// Fonction pour envoyer un paquet à l'ESP32 avec délai
|
||
|
|
// Fonction pour envoyer un paquet à l'ESP32 avec délai
|
||
|
|
function sendChunksWithDelay(chunks, index) {
|
||
|
|
if (index < chunks.length) {
|
||
|
|
const chunk = chunks[index];
|
||
|
|
// Afficher le paquet dans la console
|
||
|
|
//console.log(`Envoi du paquet ${index + 1}: ${chunk}`);
|
||
|
|
|
||
|
|
// Créez un objet FormData pour envoyer le paquet
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append("imageChunk", chunk);
|
||
|
|
|
||
|
|
// Envoyez le paquet à l'ESP32
|
||
|
|
fetch("/sendImageChunk", {
|
||
|
|
method: "POST",
|
||
|
|
body: formData,
|
||
|
|
})
|
||
|
|
.then((response) => {
|
||
|
|
if (response.ok) {
|
||
|
|
console.log(`Paquet ${index + 1}/${chunks.length} envoyé avec succès à l'ESP32.`);
|
||
|
|
} else {
|
||
|
|
throw new Error("Erreur lors de l'envoi du paquet.");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.error(error);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// Planifiez l'envoi du prochain paquet après un délai de 1000 millisecondes (1 seconde)
|
||
|
|
setTimeout(() => {
|
||
|
|
sendChunksWithDelay(chunks, index + 1);
|
||
|
|
}, 10);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Commencez l'envoi des chunks avec délai, en commençant par le premier (index 0)
|
||
|
|
sendChunksWithDelay(chunks, 0);
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|