image-rip.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Key-Based Image Scrambler</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        body {
            font-family: sans-serif;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            color: #a0a0a0;
            background-color: #161616;
        }
        .main-container {
            display: flex;
            width: 95vw;
            height: 100%;
        }
        .image-area {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px;
            overflow: auto;
            min-width: 300px;
        }
        #drop-area {
            border: 2px dashed #ccc;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            width: calc(100% - 40px);
            max-width: 300px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: #333;
            color: #eee;
            margin-bottom: 20px;
        }
        #drop-area.highlight {
            border-color: #007bff;
            background-color: #e6f7ff;
        }
        canvas {
            border: 1px solid #ccc;
            max-width: 100%;
            height: auto;
        }
        #resizer {
            width: 5px;
            cursor: ew-resize;
            background-color: #444;
            flex-shrink: 0;
        }
        .controls-sidebar {
            width: 350px;
            min-width: 250px;
            max-width: 600px;
            background-color: #1a1a1a;
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            align-items: center;
        }
        .controls {
            margin-top: 10px;
            text-align: center;
            width: 100%;
        }
        input[type="text"], input[type="number"] {
            padding: 8px;
            font-size: 16px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            width: calc(100% - 16px);
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
        label {
            display: block;
            margin-top: 10px;
        }
        button {
            padding: 10px 20px;
            margin: 5px 0;
            font-size: 16px;
            cursor: pointer;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            width: calc(100% - 10px);
        }
        button:hover {
            opacity: 0.9;
        }
        #applyScrambleBtn, #applyXORBtn { background-color: #007bff; }
        #justScrambleBtn, #justXORBtn { background-color: #28a745; }
        #reverseScrambleBtn, #reverseXORBtn { background-color: #007bff; }
        #justUnscrambleBtn, #justUnXORBtn { background-color: #ff69b4; }

        #message {
            margin-top: 10px;
            color: red;
            width: 100%;
            text-align: center;
        }
        hr {
            border-color: #555;
            width: 100%;
            margin: 20px 0;
        }
        .legacy-container {
            margin-top: 15px;
            font-size: 0.9em;
            color: #888;
        }
    </style>
</head>
<body>

    <div class="main-container">
        <div class="image-area">
            <canvas id="imageCanvas"></canvas>
        </div>

        <div id="resizer"></div> 
        <div class="controls-sidebar">
            <div id="drop-area">
                <p>Drag & Drop</p> 
                <input type="file" id="fileInput" accept="image/*" style="display: none;">
            </div>
            <p id="message"></p>

            <div class="controls">
                <label for="keyInput">Key (ASCII characters, your passphrase/password):</label><br>
                <input type="text" id="keyInput" placeholder="Enter your secret key, longer=better">
                <br>
                <label for="cInput">Choose a number between 1 and 34,359,738,336. default is 11111.
                    <br> Both people must know this number. Default is fine.</label><br>
                <input type="number" id="cInput" placeholder="11111" value="11111" min="1" max="34359738336">
                <br>
                <button id="applyScrambleBtn">Apply Scramble & XOR</button>
                <button id="reverseScrambleBtn">Reverse Scramble & XOR</button>
                <br>

                <hr>

                <button id="justScrambleBtn">Just Scramble</button>
                <button id="justUnscrambleBtn">Just Un-Scramble</button>
                <br>
                <button id="justXORBtn">Just XOR</button>
                <button id="justUnXORBtn">Just Un-XOR</button>
                <p>
                    **To Reverse:** Load the scrambled image (via drag & drop) then enter the **same key** and click "Reverse".
                </p>
                <br><br>
                <hr>
                <div class="legacy-container">
                    <label style="display:inline-block; cursor:pointer;">
                        <input type="checkbox" id="legacyMode"> Use Legacy Mode (Order doesn't matter)
                    </label>
                </div>
                <br><br>
                This is not secure and only to be used to unscramble previous weak scrambles.<br>
                <br><br><hr><br>
                <a href="https://lockman007.github.io/PixelSwirl/">Homepage [back]</a><br><br>
                <a href="https://github.com/LockMan007/PixelSwirl">github repo</a>
            </div>
        </div>
    </div>

    <script>
        const dropArea = document.getElementById('drop-area');
        const fileInput = document.getElementById('fileInput');
        const imageCanvas = document.getElementById('imageCanvas');
        const ctx = imageCanvas.getContext('2d');
        const keyInput = document.getElementById('keyInput');
        const cInput = document.getElementById('cInput');
        const legacyMode = document.getElementById('legacyMode');
        const applyScrambleBtn = document.getElementById('applyScrambleBtn');
        const reverseScrambleBtn = document.getElementById('reverseScrambleBtn');
        const justScrambleBtn = document.getElementById('justScrambleBtn');
        const justXORBtn = document.getElementById('justXORBtn');
        const justUnscrambleBtn = document.getElementById('justUnscrambleBtn');
        const justUnXORBtn = document.getElementById('justUnXORBtn');
        const messageElement = document.getElementById('message');

        const controlsSidebar = document.querySelector('.controls-sidebar');
        const resizer = document.getElementById('resizer');

        let originalImageDataOnLoad = null;
        let currentImageData = null;
        let xorSeedsApplied = false;
        let scrambledApplied = false;
        let isResizing = false;

        resizer.addEventListener('mousedown', (e) => {
            isResizing = true;
            document.addEventListener('mousemove', resize);
            document.addEventListener('mouseup', stopResize);
            document.body.style.userSelect = 'none';
            document.body.style.cursor = 'ew-resize';
        });

        function resize(e) {
            if (!isResizing) return;
            const newSidebarWidth = document.body.offsetWidth - e.clientX;
            const minWidth = parseInt(getComputedStyle(controlsSidebar).minWidth);
            const maxWidth = parseInt(getComputedStyle(controlsSidebar).maxWidth);
            if (newSidebarWidth >= minWidth && newSidebarWidth <= maxWidth) {
                controlsSidebar.style.width = newSidebarWidth + 'px';
            }
        }

        function stopResize() {
            isResizing = false;
            document.removeEventListener('mousemove', resize);
            document.removeEventListener('mouseup', stopResize);
            document.body.style.userSelect = '';
            document.body.style.cursor = '';
        }

        function showMessage(msg) { messageElement.textContent = msg; }

        function createSeededRandom(seed) {
            let m = 2**35 - 31;
            let a = 185852;
            let c = parseInt(cInput.value);
            let s = seed % m;
            return function() {
                s = (a * s + c) % m;
                return s / m;
            };
        }

        function getSeed(key) {
            if (legacyMode.checked) {
                // Original: Order doesn't matter (abc = cba)
                return key.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
            } else {
                // New: Order matters (abc != cba)
                return key.split('').reduce((acc, char, i) => acc + (char.charCodeAt(0) * (i + 1)), 0);
            }
        }

        function generateShuffleMap(size, seed) {
            const indices = Array.from({ length: size }, (_, i) => i);
            const seededRandom = createSeededRandom(seed);
            for (let i = indices.length - 1; i > 0; i--) {
                const j = Math.floor(seededRandom() * (i + 1));
                [indices[i], indices[j]] = [indices[j], indices[i]];
            }
            return indices;
        }

        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => dropArea.addEventListener(e, preventDefaults, false));
        ['dragenter', 'dragover'].forEach(e => dropArea.addEventListener(e, () => dropArea.classList.add('highlight'), false));
        ['dragleave', 'drop'].forEach(e => dropArea.addEventListener(e, () => dropArea.classList.remove('highlight'), false));
        dropArea.addEventListener('drop', (e) => handleFiles(e.dataTransfer.files), false);
        dropArea.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', (e) => handleFiles(e.target.files));

        function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); }

        function handleFiles(files) {
            if (files.length === 0) return;
            const file = files[0];
            if (!file.type.startsWith('image/')) { showMessage('Please drop an image file.'); return; }
            showMessage('');
            const reader = new FileReader();
            reader.onload = function(event) {
                const img = new Image();
                img.onload = function() {
                    imageCanvas.width = img.width;
                    imageCanvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                    currentImageData = ctx.getImageData(0, 0, imageCanvas.width, imageCanvas.height);
                    xorSeedsApplied = false;
                    scrambledApplied = false;
                };
                img.src = event.target.result;
            };
            reader.readAsDataURL(file);
        }

        function applyXOR(imageData, key) {
            const data = imageData.data;
            const pixelCount = data.length / 4;
            const seed = getSeed(key);
            const seededRandomXOR = createSeededRandom(seed);
            for (let i = 0; i < pixelCount; i++) {
                const idx = i * 4;
                data[idx] ^= Math.floor(seededRandomXOR() * 256);
                data[idx + 1] ^= Math.floor(seededRandomXOR() * 256);
                data[idx + 2] ^= Math.floor(seededRandomXOR() * 256);
            }
            xorSeedsApplied = true;
            return imageData;
        }

        function applyScramble(imageData, key) {
            const data = new Uint8ClampedArray(imageData.data);
            const pixelCount = data.length / 4;
            const seed = getSeed(key);
            const seededRandomScramble = createSeededRandom(seed + 1);
            const scrambleMap = generateShuffleMap(pixelCount, seededRandomScramble().toFixed(0));
            const scrambledData = new Uint8ClampedArray(data.length);
            for (let i = 0; i < pixelCount; i++) {
                const origIdx = i * 4;
                const targetIdx = scrambleMap[i] * 4;
                scrambledData[targetIdx] = data[origIdx];
                scrambledData[targetIdx + 1] = data[origIdx + 1];
                scrambledData[targetIdx + 2] = data[origIdx + 2];
                scrambledData[targetIdx + 3] = data[origIdx + 3];
            }
            imageData.data.set(scrambledData);
            scrambledApplied = true;
            return imageData;
        }

        function reverseScramble(imageData, key) {
            const data = new Uint8ClampedArray(imageData.data);
            const pixelCount = data.length / 4;
            const seed = getSeed(key);
            const seededRandomScramble = createSeededRandom(seed + 1);
            const scrambleMap = generateShuffleMap(pixelCount, seededRandomScramble().toFixed(0));
            const reverseMap = new Array(pixelCount);
            for (let i = 0; i < pixelCount; i++) reverseMap[scrambleMap[i]] = i;
            const unscrambledData = new Uint8ClampedArray(data.length);
            for (let i = 0; i < pixelCount; i++) {
                const scramIdx = i * 4;
                const origIdx = reverseMap[i] * 4;
                unscrambledData[origIdx] = data[scramIdx];
                unscrambledData[origIdx + 1] = data[scramIdx + 1];
                unscrambledData[origIdx + 2] = data[scramIdx + 2];
                unscrambledData[origIdx + 3] = data[scramIdx + 3];
            }
            imageData.data.set(unscrambledData);
            scrambledApplied = false;
            return imageData;
        }

        applyScrambleBtn.addEventListener('click', () => {
            const key = keyInput.value.trim();
            if (!currentImageData || !key) { showMessage('Image and Key required.'); return; }
            currentImageData = applyXOR(currentImageData, key);
            currentImageData = applyScramble(currentImageData, key);
            ctx.putImageData(currentImageData, 0, 0);
            showMessage('Scrambled and XORed!');
        });

        reverseScrambleBtn.addEventListener('click', () => {
            const key = keyInput.value.trim();
            if (!currentImageData || !key) { showMessage('Image and Key required.'); return; }
            currentImageData = reverseScramble(currentImageData, key);
            currentImageData = applyXOR(currentImageData, key); // XOR is its own inverse
            ctx.putImageData(currentImageData, 0, 0);
            showMessage('Restored!');
        });

        justScrambleBtn.addEventListener('click', () => {
            const key = keyInput.value.trim();
            if (!currentImageData || !key) return;
            currentImageData = applyScramble(currentImageData, key);
            ctx.putImageData(currentImageData, 0, 0);
            showMessage('Scrambled!');
        });

        justUnscrambleBtn.addEventListener('click', () => {
            const key = keyInput.value.trim();
            if (!currentImageData || !key) return;
            currentImageData = reverseScramble(currentImageData, key);
            ctx.putImageData(currentImageData, 0, 0);
            showMessage('Unscrambled!');
        });

        justXORBtn.addEventListener('click', () => {
            const key = keyInput.value.trim();
            if (!currentImageData || !key) return;
            currentImageData = applyXOR(currentImageData, key);
            ctx.putImageData(currentImageData, 0, 0);
            showMessage('XORed!');
        });

        justUnXORBtn.addEventListener('click', () => {
            const key = keyInput.value.trim();
            if (!currentImageData || !key) return;
            currentImageData = applyXOR(currentImageData, key); 
            ctx.putImageData(currentImageData, 0, 0);
            showMessage('Un-XORed!');
        });

        window.addEventListener('load', () => showMessage('Please load an image first.'));
    </script>
</body>
</html>