155 lines
5.4 KiB
HTML
155 lines
5.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Conversion d'image en C</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Conversion d'image en tableau C</h1>
|
||
|
|
|
||
|
|
<form id="imageForm" action="/sendImage" method="post">
|
||
|
|
<input type="hidden" name="imageData" id="imageData">
|
||
|
|
<input type="hidden" name="imageSize" id="imageSize">
|
||
|
|
<input type="hidden" name="imageSizeOrign" id="imageSizeOrign">
|
||
|
|
<button type="button" onclick="sendToESP()">Envoyer a l'ecran</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<input type="file" id="imageInput" accept="image/*" onchange="convertImage()">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="result">
|
||
|
|
<!-- L'image convertie sera affichée ici -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function convertImage() {
|
||
|
|
const inputElement = document.getElementById("imageInput");
|
||
|
|
const file = inputElement.files[0];
|
||
|
|
|
||
|
|
if (file) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
|
||
|
|
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");
|
||
|
|
document.getElementById("imageData").value = outputArray.join("");
|
||
|
|
resultDiv.innerHTML = `<h2>Image convertie en tableau C :</h2><pre id="completeData" >${outputArray.join("")}</pre>`;
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function compresse(input_data) {
|
||
|
|
let consecutiveCount = 1;
|
||
|
|
const consecutiveCountsArray = [];
|
||
|
|
|
||
|
|
for (let i = 0; i < input_data.length-1; i++) {
|
||
|
|
const currentValue = input_data[i];
|
||
|
|
const nextValue = input_data[i + 1];
|
||
|
|
if (currentValue === nextValue) {
|
||
|
|
consecutiveCount++;
|
||
|
|
} else {
|
||
|
|
const entry = {};
|
||
|
|
entry[`${currentValue.toString(16).toUpperCase()}`] = consecutiveCount;
|
||
|
|
consecutiveCountsArray.push(entry);
|
||
|
|
consecutiveCount = 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return consecutiveCountsArray;
|
||
|
|
}
|
||
|
|
|
||
|
|
function decompresse(consecutiveCounts) {
|
||
|
|
const input_data = [];
|
||
|
|
|
||
|
|
consecutiveCounts.forEach((entry) => {
|
||
|
|
const key = Object.keys(entry)[0];
|
||
|
|
const count = entry[key];
|
||
|
|
|
||
|
|
// Supprimer les espaces et convertir en majuscules
|
||
|
|
const cleanedKey = key.replace(/\s+/g, '').toUpperCase();
|
||
|
|
|
||
|
|
// Ajouter le préfixe "0x"
|
||
|
|
const hexValue = cleanedKey.substring(2);
|
||
|
|
|
||
|
|
for (let i = 0; i < count; i++) {
|
||
|
|
input_data.push('0x'+hexValue);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return input_data;
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendToESP() {
|
||
|
|
// Obtenez la référence de la div par son identifiant
|
||
|
|
const myDiv = document.getElementById("completeData");
|
||
|
|
|
||
|
|
// Obtenez le texte de la div
|
||
|
|
const divText = myDiv.textContent;
|
||
|
|
|
||
|
|
// Créez un objet FormData pour envoyer les données
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append("divText", compresse(divText));
|
||
|
|
|
||
|
|
fetch("/imageData", {
|
||
|
|
method: "POST",
|
||
|
|
body: formData,
|
||
|
|
})
|
||
|
|
.then((response) => {
|
||
|
|
if (response.ok) {
|
||
|
|
return response.text();
|
||
|
|
} else {
|
||
|
|
throw new Error("Erreur lors de l'envoi des données.");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then((responseText) => {
|
||
|
|
console.log(responseText); // La réponse du serveur
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.error(error);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
<!-- function sendToESP() { -->
|
||
|
|
<!-- const hexData = document.getElementById("imageData").value.split(','); -->
|
||
|
|
<!-- const compressedData = compresse(hexData); -->
|
||
|
|
|
||
|
|
<!-- console.log(typeof compressedData); -->
|
||
|
|
<!-- decompresse_data = JSON.stringify(decompresse(compressedData)).replace(/"/g, '').replace(']', '};').replace('[', 'const uint16_t image_data[] = {'); -->
|
||
|
|
<!-- console.log(decompresse_data); -->
|
||
|
|
|
||
|
|
<!-- compressData_complete = JSON.stringify(compressedData).replace(/\s/g, '').replace(/"/g, ''); -->
|
||
|
|
<!-- document.getElementById("imageData").value = JSON.stringify(compressedData).replace(/\s/g, '').replace(/"/g, ''); -->
|
||
|
|
<!-- document.getElementById("imageSize").value = compressedData.length; -->
|
||
|
|
<!-- document.getElementById("imageSizeOrign").value = hexData.length; -->
|
||
|
|
|
||
|
|
<!-- const form = document.getElementById("imageForm"); -->
|
||
|
|
<!-- form.submit(); -->
|
||
|
|
<!-- } -->
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|