API tools faq
paste
Advertisement
Thunder-Menu

Compress_Encode_Decode_ZipToBmp.html

Thunder-Menu
Aug 16th, 2023
777
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.19 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Compression, Encodage et Décodage</title>
  7. </head>
  8. <body>
  9.     <h1>Compression, Encodage et Décodage</h1>
  10.     <select id="operationSelect">
  11.         <option value="compress">Compresser</option>
  12.         <option value="encode">Encodage</option>
  13.         <option value="decode">Décodage</option>
  14.     </select>
  15.  
  16.     <div id="compressSection" style="display: none;">
  17.         <h2>Compression de Fichiers</h2>
  18.         <input type="file" id="fileInput" multiple>
  19.         <button id="compressButton" disabled>Compresser et Enregistrer</button>
  20.     </div>
  21.  
  22.     <div id="encodeSection" style="display: none;">
  23.         <h2>Générateur de Motif de Carrés - Encodage</h2>
  24.         <input type="file" id="encodeFileInput" style="display: none;">
  25.         <button id="loadButton">Sélectionner un fichier</button>
  26.         <button id="generateButton" disabled>Générer</button>
  27.         <button id="saveButton" disabled>Enregistrer le motif</button>
  28.         <textarea id="textBox" rows="10" cols="50"></textarea>
  29.         <div id="encodePictureBox"></div>
  30.     </div>
  31.  
  32.     <div id="decodeSection" style="display: none;">
  33.         <h2>Générateur de Motif de Carrés - Décodage</h2>
  34.         <input type="file" id="decodeFileInput" class="button">
  35.         <button id="decodeGenerateButton" class="button" disabled>Générer</button>
  36.         <button id="decodeSaveButton" class="button" style="display: none;">Enregistrer</button>
  37.         <textarea id="decodeTextBox" rows="10" cols="50" style="margin-top: 20px;" readonly></textarea>
  38.         <canvas id="decodePictureBox"></canvas>
  39.     </div>
  40.  
  41.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
  42.     <script>
  43.         document.addEventListener("DOMContentLoaded", function () {
  44.             const operationSelect = document.getElementById("operationSelect");
  45.             const compressSection = document.getElementById("compressSection");
  46.             const encodeSection = document.getElementById("encodeSection");
  47.             const decodeSection = document.getElementById("decodeSection");
  48.  
  49.             operationSelect.addEventListener("change", function () {
  50.                 const selectedOperation = operationSelect.value;
  51.                 if (selectedOperation === "compress") {
  52.                     compressSection.style.display = "block";
  53.                     encodeSection.style.display = "none";
  54.                     decodeSection.style.display = "none";
  55.                 } else if (selectedOperation === "encode") {
  56.                     compressSection.style.display = "none";
  57.                     encodeSection.style.display = "block";
  58.                     decodeSection.style.display = "none";
  59.                 } else if (selectedOperation === "decode") {
  60.                     compressSection.style.display = "none";
  61.                     encodeSection.style.display = "none";
  62.                     decodeSection.style.display = "block";
  63.                 }
  64.             });
  65.  
  66.             // Compression Section
  67.             const fileInput = document.getElementById("fileInput");
  68.             const compressButton = document.getElementById("compressButton");
  69.  
  70.             fileInput.addEventListener("change", function (e) {
  71.                 if (e.target.files.length > 0) {
  72.                     compressButton.disabled = false;
  73.                 }
  74.             });
  75.  
  76.             compressButton.addEventListener("click", function () {
  77.                 const filesToCompress = Array.from(fileInput.files);
  78.                 const zip = new JSZip();
  79.  
  80.                 const promises = filesToCompress.map(file => {
  81.                     return new Promise(resolve => {
  82.                         const reader = new FileReader();
  83.                         reader.onload = function () {
  84.                             zip.file(file.name, reader.result);
  85.                             resolve();
  86.                         };
  87.                         reader.readAsArrayBuffer(file);
  88.                     });
  89.                 });
  90.  
  91.                 Promise.all(promises).then(() => {
  92.                     const zipName = prompt("Entrez le nom du fichier ZIP :") || "compressed.zip";
  93.                     const saveFileDialog = document.createElement("a");
  94.                     saveFileDialog.style.display = "none";
  95.                     saveFileDialog.addEventListener("click", function (e) {
  96.                         e.target.style.display = "none";
  97.                     });
  98.                     document.body.appendChild(saveFileDialog);
  99.  
  100.                     zip.generateAsync({ type: "blob" }).then(function (content) {
  101.                         const url = URL.createObjectURL(content);
  102.                         saveFileDialog.href = url;
  103.                         saveFileDialog.download = zipName;
  104.                         saveFileDialog.click();
  105.                         URL.revokeObjectURL(url);
  106.                     });
  107.                 });
  108.             });
  109.  
  110.             // Encoding Section
  111.             const encodeFileInput = document.getElementById("encodeFileInput");
  112.             const loadButton = document.getElementById("loadButton");
  113.             const generateButton = document.getElementById("generateButton");
  114.             const saveButton = document.getElementById("saveButton");
  115.             const textBox = document.getElementById("textBox");
  116.             const encodePictureBox = document.getElementById("encodePictureBox");
  117.  
  118.             loadButton.addEventListener("click", function () {
  119.                 encodeFileInput.click();
  120.             });
  121.  
  122.             encodeFileInput.addEventListener("change", function (e) {
  123.                 const file = e.target.files[0];
  124.                 if (file) {
  125.                     const reader = new FileReader();
  126.                     reader.onload = function (event) {
  127.                         const arrayBuffer = event.target.result;
  128.                         const byteArray = new Uint8Array(arrayBuffer);
  129.                         let binaryText = "";
  130.                         byteArray.forEach(function (byte) {
  131.                             binaryText += byte.toString(2).padStart(8, "0");
  132.                         });
  133.                         textBox.value = binaryText;
  134.                         generateButton.disabled = false;
  135.                     };
  136.                     reader.readAsArrayBuffer(file);
  137.                 }
  138.             });
  139.  
  140.             generateButton.addEventListener("click", function () {
  141.                 const binaryText = textBox.value;
  142.                 const imageSize = Math.ceil(Math.sqrt(binaryText.length));
  143.                 const bitmap = new ImageData(imageSize, imageSize);
  144.  
  145.                 for (let i = 0; i < binaryText.length; i++) {
  146.                    const x = i % imageSize;
  147.                    const y = Math.floor(i / imageSize);
  148.                    const color = (binaryText[i] === "1") ? [0, 0, 0, 255] : [255, 255, 255, 255];
  149.                    const index = (x + y * imageSize) * 4;
  150.                    bitmap.data[index] = color[0];
  151.                    bitmap.data[index + 1] = color[1];
  152.                    bitmap.data[index + 2] = color[2];
  153.                    bitmap.data[index + 3] = color[3];
  154.                }
  155.  
  156.                const canvas = document.createElement("canvas");
  157.                canvas.width = imageSize;
  158.                canvas.height = imageSize;
  159.                const context = canvas.getContext("2d");
  160.                context.putImageData(bitmap, 0, 0);
  161.  
  162.                encodePictureBox.innerHTML = "";
  163.                encodePictureBox.appendChild(canvas);
  164.                saveButton.disabled = false;
  165.            });
  166.  
  167.            saveButton.addEventListener("click", function () {
  168.                const canvas = encodePictureBox.querySelector("canvas");
  169.                const image = canvas.toDataURL("image/bmp").replace("image/bmp", "image/octet-stream");
  170.                const a = document.createElement("a");
  171.                a.href = image;
  172.                a.download = prompt("Entrez le nom du fichier BMP :", "motif.bmp") || "motif.bmp";
  173.                document.body.appendChild(a);
  174.                a.click();
  175.                document.body.removeChild(a);
  176.            });
  177.  
  178.            // Decoding Section
  179.            const decodeFileInput = document.getElementById("decodeFileInput");
  180.            const decodeGenerateButton = document.getElementById("decodeGenerateButton");
  181.            const decodeSaveButton = document.getElementById("decodeSaveButton");
  182.            const decodePictureBox = document.getElementById("decodePictureBox");
  183.            const decodeTextBox = document.getElementById("decodeTextBox");
  184.            const decodeCanvas = decodePictureBox.getContext("2d");
  185.            let loadedBitmap = null;
  186.            let binaryText = "";
  187.  
  188.            decodeFileInput.addEventListener("change", (event) => {
  189.                 const file = event.target.files[0];
  190.                 if (file) {
  191.                     const reader = new FileReader();
  192.                     reader.onload = (e) => {
  193.                         const image = new Image();
  194.                         image.src = e.target.result;
  195.                         image.onload = () => {
  196.                             decodePictureBox.width = image.width;
  197.                             decodePictureBox.height = image.height;
  198.                             decodeCanvas.drawImage(image, 0, 0);
  199.                             loadedBitmap = image;
  200.                             decodeGenerateButton.disabled = false;
  201.                         };
  202.                     };
  203.                     reader.readAsDataURL(file);
  204.                 }
  205.             });
  206.  
  207.             decodeGenerateButton.addEventListener("click", () => {
  208.                 if (!loadedBitmap) {
  209.                     alert("Veuillez charger une image d'abord.");
  210.                     return;
  211.                 }
  212.  
  213.                 const imageData = decodeCanvas.getImageData(0, 0, decodePictureBox.width, decodePictureBox.height);
  214.                 binaryText = generateBinaryPattern(imageData);
  215.                 decodeTextBox.value = binaryText;
  216.                 decodeSaveButton.style.display = "block";
  217.             });
  218.  
  219.             decodeSaveButton.addEventListener("click", () => {
  220.                 if (!binaryText.trim()) {
  221.                     alert("Le contenu du TextBox est vide. Veuillez générer le motif d'abord.");
  222.                     return;
  223.                 }
  224.  
  225.                 const binaryBytes = convertBinaryTextToBytes(binaryText);
  226.                 const blob = new Blob([binaryBytes], { type: "application/zip" });
  227.                 const a = document.createElement("a");
  228.                 const fileName = prompt("Entrez le nom du fichier ZIP :") || "binary_pattern.zip";
  229.                 a.href = URL.createObjectURL(blob);
  230.                 a.download = fileName;
  231.                 document.body.appendChild(a);
  232.                 a.click();
  233.                 document.body.removeChild(a);
  234.             });
  235.  
  236.             function generateBinaryPattern(imageData) {
  237.                 const threshold = 128;
  238.                 let binaryText = "";
  239.  
  240.                 for (let y = 0; y < imageData.height; y++) {
  241.                    for (let x = 0; x < imageData.width; x++) {
  242.                        const index = (y * imageData.width + x) * 4;
  243.                        const grayscale = (imageData.data[index] + imageData.data[index + 1] + imageData.data[index + 2]) / 3;
  244.  
  245.                        binaryText += grayscale < threshold ? "1" : "0";
  246.                    }
  247.                    binaryText += "\n";
  248.                }
  249.  
  250.                return binaryText;
  251.            }
  252.  
  253.            function convertBinaryTextToBytes(binaryText) {
  254.                binaryText = binaryText.replace(/\s+/g, "");
  255.                const numOfBytes = binaryText.length / 8;
  256.                const bytes = new Uint8Array(numOfBytes);
  257.  
  258.                for (let i = 0; i < numOfBytes; i++) {
  259.                    const byteStr = binaryText.substr(i * 8, 8);
  260.                    const byteValue = parseInt(byteStr, 2);
  261.                    bytes[i] = byteValue;
  262.                }
  263.  
  264.                return bytes;
  265.            }
  266.        });
  267.    </script>
  268. </body>
  269. </html>
  270.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!