collabsingFile.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Collapsing Picture</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        .container {display: flex;flex-direction: column;gap: 15px;max-width: 500px;}
        #base64Textarea { width: 100%; height: 100px; font-family: monospace; overflow-x: hidden; overflow-y: scroll; border: 1px solid black; resize: both; }
        canvas, img { border: 1px solid #ccc; max-width: 100%; height: auto; }
        .savePicture {max-width: 250px;height: auto;}
        .saveZone {
            max-height: 250px;
            max-width: 100%;
            overflow-x: scroll;
            display: flex;
            gap: 0px;
        }
    </style>
</head>
<body>
    <div class="container">
        
        <input type="file" id="imageInput" accept="image/*">
        <button onclick="restoreData()">Restore Data</button>
        <button onclick="breakIt()">Break Data</button><button onclick="savePic()">Save Data</button>
        
        <label>Base64-Code:</label>
        <div contenteditable="true" id="base64Textarea" placeholder="Base64-Code erscheint hier oder kann hier eingefügt werden..."></div>
        
        <label>Canvas-Vorschau:</label>
        <canvas id="imageCanvas"></canvas>

        <label>IMG Vorschau</label>
        <img src="" id="imageTag">
    </div>
    <div class="saveZone" id="saveZone">

    </div>
    <script>
        const imageInput = document.getElementById('imageInput');
        const base64Textarea = document.getElementById('base64Textarea');
        const imageTag = document.getElementById('imageTag');
        const saveZone = document.getElementById('saveZone');
        const canvas = document.getElementById('imageCanvas');
        const ctx = canvas.getContext('2d');

        let lastData = '';
        let saveData = [];
        
        function drawBase64ToCanvas(base64String) {
            if (!base64String) return;
            const img = new Image();
            img.onload = function() {
                canvas.width = img.width;
                canvas.height = img.height;
                
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0);
            };
            img.onerror = function() {
                console.error("Ungültiger Base64-Code oder kein Bild.");
            };
            
            img.src = base64String;
            imageTag.src = base64String;
        }
        
        imageInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(event) {
                const base64Result = event.target.result;
                
                base64Textarea.innerText = base64Result;
                
                drawBase64ToCanvas(base64Result);

                lastData = base64Result;
            };
            
            reader.readAsDataURL(file);
        });
        
        base64Textarea.addEventListener('input', function() {
            drawBase64ToCanvas(base64Textarea.innerText.trim());
        });

        function random(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function breakIt(amount = 5) {
            let data = base64Textarea.innerText;
            let letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0987654321'.split('');
            let replacement = '';
            for(let i = 1; i <= 5; i++) {
                replacement += letters[random(0,letters.length-1)];
            }
            data = data.match(/.{1,5}/g);
            for(let i = 1; i <= Math.max(1,amount); i++) {
                data[random(6,data.length-1)] = replacement;
            }
            base64Textarea.innerText = data.join('');
            drawBase64ToCanvas(data.join(''));
        }

        function restoreData() {
            base64Textarea.innerText = lastData;
            drawBase64ToCanvas(lastData);
        }

        function savePic() {
            saveData.push(base64Textarea.innerText);
            let HTML = '';
            saveData.forEach(pic => {
                HTML += `<img src="${pic}" onclick="download(this.src)" class="savePicture">`;
            });
            console.log(HTML);
            saveZone.innerHTML = HTML;
        }

        function download(dataURL) {
            const link = document.createElement('a');
            link.href = dataURL;
            let format = dataURL.match(/data:image\/.+;/)[0].match(/\/.+/)[0].replace('/','').replace(';','');
            link.download = 'Glitched.' + format;
            document.body.appendChild(link);
            link.click();
            link.remove();
        }
      // Because I couln't figgure out how to do basic stuff Gemini made the Input and draw Part
      // At least I did download(), savePic(), restoredata(), breakIt() and random()
    </script>
</body>
</html>