<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reverse Permutation Test</title>
<style>
body { font-family: Arial; padding: 20px; }
img { max-width: 300px; margin: 10px; border: 1px solid #ccc; }
</style>
</head>
<body>
<h2>Reverse Permutation → Restore Image</h2>
<input type="file" id="upload" accept="image/*"><br><br>
<canvas id="originalCanvas"></canvas>
<canvas id="restoredCanvas"></canvas>
<script>
document.getElementById("upload").addEventListener("change", function(e) {
const file = e.target.files[0];
const img = new Image();
img.onload = function() {
const w = img.width;
const h = img.height;
// Draw original image
const originalCanvas = document.getElementById("originalCanvas");
originalCanvas.width = w;
originalCanvas.height = h;
const octx = originalCanvas.getContext("2d");
octx.drawImage(img, 0, 0);
// Get pixel data
const imageData = octx.getImageData(0, 0, w, h);
const pixels = imageData.data; // RGBA flat array
// Generate a permutation index
const size = pixels.length;
let idx = [...Array(size).keys()];
// Shuffle index (simple permutation)
for (let i = size - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[idx[i], idx[j]] = [idx[j], idx[i]];
}
// Apply permutation
let permuted = new Uint8ClampedArray(size);
for (let i = 0; i < size; i++) {
permuted[i] = pixels[idx[i]];
}
// Reverse permutation
let restored = new Uint8ClampedArray(size);
for (let i = 0; i < size; i++) {
restored[idx[i]] = permuted[i];
}
// Draw restored image
const restoredCanvas = document.getElementById("restoredCanvas");
restoredCanvas.width = w;
restoredCanvas.height = h;
const rctx = restoredCanvas.getContext("2d");
const restoredImageData = new ImageData(restored, w, h);
rctx.putImageData(restoredImageData, 0, 0);
};
img.src = URL.createObjectURL(file);
});
</script>
</body>
</html>
No comments:
Post a Comment