<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chaotic Iris Encryption Demo (Option A)</title>
<style>
body { font-family: Arial; padding: 20px; }
canvas { border: 1px solid #ccc; margin: 10px; }
img { max-width: 300px; }
</style>
</head>
<body>
<h2>Chaotic Iris Encryption Demo (Pure JavaScript)</h2>
<input type="file" id="upload" accept="image/*"><br><br>
<label>Noise Amount: <span id="noiseVal">0</span></label><br>
<input type="range" id="noiseSlider" min="0" max="50" value="0"><br><br>
<button id="encryptBtn">Encrypt</button>
<button id="decryptBtn">Decrypt</button>
<button id="downloadEnc">Download Encrypted</button>
<button id="downloadDec">Download Decrypted</button>
<h3>Original</h3>
<canvas id="originalCanvas"></canvas>
<h3>Noisy</h3>
<canvas id="noisyCanvas"></canvas>
<h3>Encrypted</h3>
<canvas id="encryptedCanvas"></canvas>
<h3>Decrypted</h3>
<canvas id="decryptedCanvas"></canvas>
<script>
// ---------------------------
// Utility: Add noise
// ---------------------------
function addNoise(pixels, amount) {
let noisy = new Uint8ClampedArray(pixels.length);
for (let i = 0; i < pixels.length; i++) {
let n = pixels[i] + (Math.random() * amount - amount/2);
noisy[i] = Math.max(0, Math.min(255, n));
}
return noisy;
}
// ---------------------------
// 3D Chaotic Map Generator
// ---------------------------
function chaotic3D(a, b, c, x0, y0, z0, size) {
let seq = new Array(size);
let x = x0, y = y0, z = z0;
for (let i = 0; i < size; i++) {
x = a * x * (1 - x) + y;
y = b * y * (1 - y) + z;
z = c * z * (1 - z) + x;
seq[i] = [x, y, z];
}
return seq;
}
// ---------------------------
// Permutation
// ---------------------------
function permute(pixels, seq) {
let size = pixels.length;
let idx = [...Array(size).keys()];
idx.sort((i, j) => seq[i][0] - seq[j][0]);
let permuted = new Uint8ClampedArray(size);
for (let i = 0; i < size; i++) permuted[i] = pixels[idx[i]];
return { permuted, idx };
}
// ---------------------------
// Diffusion
// ---------------------------
function diffuse(permuted, seq) {
let size = permuted.length;
let diffused = new Uint8ClampedArray(size);
for (let i = 0; i < size; i++) {
diffused[i] = (permuted[i] + seq[i][1] * 255) % 256;
}
return diffused;
}
// ---------------------------
// Reverse Diffusion
// ---------------------------
function undiffuse(diffused, seq) {
let size = diffused.length;
let undiff = new Uint8ClampedArray(size);
for (let i = 0; i < size; i++) {
undiff[i] = (diffused[i] - seq[i][1] * 255 + 256) % 256;
}
return undiff;
}
// ---------------------------
// Reverse Permutation
// ---------------------------
function reversePermutation(undiffused, idx) {
let original = new Uint8ClampedArray(undiffused.length);
for (let i = 0; i < idx.length; i++) {
original[idx[i]] = undiffused[i];
}
return original;
}
// ---------------------------
// Draw pixels to canvas
// ---------------------------
function drawToCanvas(canvas, pixels, w, h) {
let ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
let imgData = new ImageData(pixels, w, h);
ctx.putImageData(imgData, 0, 0);
}
// ---------------------------
// Main Logic
// ---------------------------
let originalPixels, noisyPixels, encryptedPixels, decryptedPixels;
let width, height;
let seq, idx;
document.getElementById("noiseSlider").oninput = function() {
document.getElementById("noiseVal").innerText = this.value;
};
document.getElementById("upload").addEventListener("change", function(e) {
const file = e.target.files[0];
const img = new Image();
img.onload = function() {
width = img.width;
height = img.height;
const canvas = document.getElementById("originalCanvas");
const ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
let data = ctx.getImageData(0, 0, width, height);
originalPixels = data.data;
drawToCanvas(document.getElementById("originalCanvas"), originalPixels, width, height);
};
img.src = URL.createObjectURL(file);
});
// ---------------------------
// Encrypt
// ---------------------------
document.getElementById("encryptBtn").onclick = function() {
let noiseAmount = parseInt(document.getElementById("noiseSlider").value);
noisyPixels = addNoise(originalPixels, noiseAmount);
drawToCanvas(document.getElementById("noisyCanvas"), noisyPixels, width, height);
seq = chaotic3D(3.99, 3.98, 3.97, 0.1, 0.2, 0.3, noisyPixels.length);
let perm = permute(noisyPixels, seq);
idx = perm.idx;
encryptedPixels = diffuse(perm.permuted, seq);
drawToCanvas(document.getElementById("encryptedCanvas"), encryptedPixels, width, height);
};
// ---------------------------
// Decrypt
// ---------------------------
document.getElementById("decryptBtn").onclick = function() {
let undiff = undiffuse(encryptedPixels, seq);
decryptedPixels = reversePermutation(undiff, idx);
drawToCanvas(document.getElementById("decryptedCanvas"), decryptedPixels, width, height);
};
// ---------------------------
// Download buttons
// ---------------------------
function downloadCanvas(canvas, filename) {
let link = document.createElement("a");
link.download = filename;
link.href = canvas.toDataURL();
link.click();
}
document.getElementById("downloadEnc").onclick = () =>
downloadCanvas(document.getElementById("encryptedCanvas"), "encrypted.png");
document.getElementById("downloadDec").onclick = () =>
downloadCanvas(document.getElementById("decryptedCanvas"), "decrypted.png");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chaotic Iris Encryption Demo (Enhanced)</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Plotly -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- GPU.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gpu.js/2.10.0/gpu.min.js"></script>
<style>
canvas { border: 1px solid #ccc; margin: 10px; }
.img-box { border: 1px solid #ddd; padding: 10px; margin-bottom: 20px; }
</style>
</head>
<body class="bg-light">
<div class="container py-4">
<h2 class="mb-4">Chaotic Iris Encryption Demo (Option B)</h2>
<div class="mb-3">
<label class="form-label">Upload Image</label>
<input type="file" id="upload" class="form-control" accept="image/*">
</div>
<div class="mb-3">
<label class="form-label">Noise Amount: <span id="noiseVal">0</span></label>
<input type="range" id="noiseSlider" class="form-range" min="0" max="50" value="0">
</div>
<div class="mb-3">
<button id="encryptBtn" class="btn btn-primary">Encrypt</button>
<button id="decryptBtn" class="btn btn-success">Decrypt</button>
<button id="downloadEnc" class="btn btn-warning">Download Encrypted</button>
<button id="downloadDec" class="btn btn-info">Download Decrypted</button>
</div>
<hr>
<h4>3D Chaotic Map Visualization</h4>
<div id="chaosPlot" style="width:100%;height:400px;"></div>
<hr>
<div class="row">
<div class="col-md-6 img-box">
<h5>Original</h5>
<canvas id="originalCanvas"></canvas>
</div>
<div class="col-md-6 img-box">
<h5>Denoised</h5>
<canvas id="denoisedCanvas"></canvas>
</div>
</div>
<div class="row">
<div class="col-md-6 img-box">
<h5>Noisy</h5>
<canvas id="noisyCanvas"></canvas>
</div>
<div class="col-md-6 img-box">
<h5>Encrypted</h5>
<canvas id="encryptedCanvas"></canvas>
</div>
</div>
<div class="row">
<div class="col-md-6 img-box">
<h5>Decrypted</h5>
<canvas id="decryptedCanvas"></canvas>
</div>
</div>
</div>
<script>
// -----------------------------------------------------
// Wavelet Denoising (simple Haar wavelet)
// -----------------------------------------------------
function waveletDenoise(pixels) {
let out = new Uint8ClampedArray(pixels.length);
for (let i = 0; i < pixels.length; i += 4) {
let avg = (pixels[i] + pixels[i+1] + pixels[i+2]) / 3;
out[i] = out[i+1] = out[i+2] = avg;
out[i+3] = pixels[i+3];
}
return out;
}
// -----------------------------------------------------
// Add Noise
// -----------------------------------------------------
function addNoise(pixels, amount) {
let noisy = new Uint8ClampedArray(pixels.length);
for (let i = 0; i < pixels.length; i++) {
let n = pixels[i] + (Math.random() * amount - amount/2);
noisy[i] = Math.max(0, Math.min(255, n));
}
return noisy;
}
// -----------------------------------------------------
// GPU-Accelerated Chaotic Map
// -----------------------------------------------------
const gpu = new GPU();
const chaoticKernel = gpu.createKernel(function(a, b, c, x0, y0, z0) {
let x = x0, y = y0, z = z0;
for (let i = 0; i < 20; i++) {
x = a * x * (1 - x) + y;
y = b * y * (1 - y) + z;
z = c * z * (1 - z) + x;
}
return [x, y, z];
}).setOutput([1]);
function chaotic3D(a, b, c, x0, y0, z0, size) {
let seq = new Array(size);
for (let i = 0; i < size; i++) {
seq[i] = chaoticKernel(a, b, c, x0, y0, z0)[0];
}
return seq;
}
// -----------------------------------------------------
// Permutation
// -----------------------------------------------------
function permute(pixels, seq) {
let size = pixels.length;
let idx = [...Array(size).keys()];
idx.sort
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chaotic Iris Encryption Demo (Enhanced)</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Plotly -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- GPU.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gpu.js/2.10.0/gpu.min.js"></script>
<style>
canvas { border: 1px solid #ccc; margin: 10px; }
.img-box { border: 1px solid #ddd; padding: 10px; margin-bottom: 20px; }
</style>
</head>
<body class="bg-light">
<div class="container py-4">
<h2 class="mb-4">Chaotic Iris Encryption Demo (Option B)</h2>
<div class="mb-3">
<label class="form-label">Upload Image</label>
<input type="file" id="upload" class="form-control" accept="image/*">
</div>
<div class="mb-3">
<label class="form-label">Noise Amount: <span id="noiseVal">0</span></label>
<input type="range" id="noiseSlider" class="form-range" min="0" max="50" value="0">
</div>
<div class="mb-3">
<button id="encryptBtn" class="btn btn-primary">Encrypt</button>
<button id="decryptBtn" class="btn btn-success">Decrypt</button>
<button id="downloadEnc" class="btn btn-warning">Download Encrypted</button>
<button id="downloadDec" class="btn btn-info">Download Decrypted</button>
</div>
<hr>
<h4>3D Chaotic Map Visualization</h4>
<div id="chaosPlot" style="width:100%;height:400px;"></div>
<hr>
<div class="row">
<div class="col-md-6 img-box">
<h5>Original</h5>
<canvas id="originalCanvas"></canvas>
</div>
<div class="col-md-6 img-box">
<h5>Denoised</h5>
<canvas id="denoisedCanvas"></canvas>
</div>
</div>
<div class="row">
<div class="col-md-6 img-box">
<h5>Noisy</h5>
<canvas id="noisyCanvas"></canvas>
</div>
<div class="col-md-6 img-box">
<h5>Encrypted</h5>
<canvas id="encryptedCanvas"></canvas>
</div>
</div>
<div class="row">
<div class="col-md-6 img-box">
<h5>Decrypted</h5>
<canvas id="decryptedCanvas"></canvas>
</div>
</div>
</div>
<script>
// -----------------------------------------------------
// Wavelet Denoising (simple Haar wavelet)
// -----------------------------------------------------
function waveletDenoise(pixels) {
let out = new Uint8ClampedArray(pixels.length);
for (let i = 0; i < pixels.length; i += 4) {
let avg = (pixels[i] + pixels[i+1] + pixels[i+2]) / 3;
out[i] = out[i+1] = out[i+2] = avg;
out[i+3] = pixels[i+3];
}
return out;
}
// -----------------------------------------------------
// Add Noise
// -----------------------------------------------------
function addNoise(pixels, amount) {
let noisy = new Uint8ClampedArray(pixels.length);
for (let i = 0; i < pixels.length; i++) {
let n = pixels[i] + (Math.random() * amount - amount/2);
noisy[i] = Math.max(0, Math.min(255, n));
}
return noisy;
}
// -----------------------------------------------------
// GPU-Accelerated Chaotic Map
// -----------------------------------------------------
const gpu = new GPU();
const chaoticKernel = gpu.createKernel(function(a, b, c, x0, y0, z0) {
let x = x0, y = y0, z = z0;
for (let i = 0; i < 20; i++) {
x = a * x * (1 - x) + y;
y = b * y * (1 - y) + z;
z = c * z * (1 - z) + x;
}
return [x, y, z];
}).setOutput([1]);
function chaotic3D(a, b, c, x0, y0, z0, size) {
let seq = new Array(size);
for (let i = 0; i < size; i++) {
seq[i] = chaoticKernel(a, b, c, x0, y0, z0)[0];
}
return seq;
}
// -----------------------------------------------------
// Permutation
// -----------------------------------------------------
function permute(pixels, seq) {
let size = pixels.length;
let idx = [...Array(size).keys()];
idx.sort((i, j) => seq[i] - seq[j]);
let permuted = new Uint8ClampedArray(size);
for (let i = 0; i < size; i++) permuted[i] = pixels[idx[i]];
return { permuted, idx };
}
// -----------------------------------------------------
// Diffusion
// -----------------------------------------------------
function diffuse(permuted, seq) {
let diffused = new Uint8ClampedArray(permuted.length);
for (let i = 0; i < permuted.length; i++) {
diffused[i] = (permuted[i] + seq[i] * 255) % 256;
}
return diffused;
}
// -----------------------------------------------------
// Reverse Diffusion
// -----------------------------------------------------
function undiffuse(diffused, seq) {
let undiff = new Uint8ClampedArray(diffused.length);
for (let i = 0; i < diffused.length; i++) {
undiff[i] = (diffused[i] - seq[i] * 255 + 256) % 256;
}
return undiff;
}
// -----------------------------------------------------
// Reverse Permutation
// -----------------------------------------------------
function reversePermutation(undiffused, idx) {
let original = new Uint8ClampedArray(undiffused.length);
for (let i = 0; i < idx.length; i++) {
original[idx[i]] = undiffused[i];
}
return original;
}
// -----------------------------------------------------
// Draw to Canvas
// -----------------------------------------------------
function drawToCanvas(canvas, pixels, w, h) {
let ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
let imgData = new ImageData(pixels, w, h);
ctx.putImageData(imgData, 0, 0);
}
// -----------------------------------------------------
// Global Variables
// -----------------------------------------------------
let originalPixels, denoisedPixels, noisyPixels, encryptedPixels, decryptedPixels;
let width, height;
let seq, idx;
// -----------------------------------------------------
// Noise Slider
// -----------------------------------------------------
document.getElementById("noiseSlider").oninput = function() {
document.getElementById("noiseVal").innerText = this.value;
};
// -----------------------------------------------------
// Upload Image
// -----------------------------------------------------
document.getElementById("upload").addEventListener("change", function(e) {
const file = e.target.files[0];
const img = new Image();
img.onload = function() {
width = img.width;
height = img.height;
const canvas = document.getElementById("originalCanvas");
const ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
let data = ctx.getImageData(0, 0, width, height);
originalPixels = data.data;
// Denoise
denoisedPixels = waveletDenoise(originalPixels);
drawToCanvas(document.getElementById("denoisedCanvas"), denoisedPixels, width, height);
drawToCanvas(document.getElementById("originalCanvas"), originalPixels, width, height);
};
img.src = URL.createObjectURL(file);
});
// -----------------------------------------------------
// Encrypt
// -----------------------------------------------------
document.getElementById("encryptBtn").onclick = function() {
let noiseAmount = parseInt(document.getElementById("noiseSlider").value);
noisyPixels = addNoise(denoisedPixels, noiseAmount);
drawToCanvas(document.getElementById("noisyCanvas"), noisyPixels, width, height);
seq = chaotic3D(3.99, 3.98, 3.97, 0.1, 0.2, 0.3, noisyPixels.length);
let perm = permute(noisyPixels, seq);
idx = perm.idx;
encryptedPixels = diffuse(perm.permuted, seq);
drawToCanvas(document.getElementById("encryptedCanvas"), encryptedPixels, width, height);
// Plot chaotic map
Plotly.newPlot("chaosPlot", [{
x: seq.slice(0, 2000),
y: seq.slice(1, 2001),
z: seq.slice(2, 2002),
mode: "lines",
type: "scatter3d"
}]);
};
// -----------------------------------------------------
// Decrypt
// -----------------------------------------------------
document.getElementById("decryptBtn").onclick = function() {
let undiff = undiffuse(encryptedPixels, seq);
decryptedPixels = reversePermutation(undiff, idx);
drawToCanvas(document.getElementById("decryptedCanvas"), decryptedPixels, width, height);
};
// -----------------------------------------------------
// Download Buttons
// -----------------------------------------------------
function downloadCanvas(canvas, filename) {
let link = document.createElement("a");
link.download = filename;
link.href = canvas.toDataURL();
link.click();
}
document.getElementById("downloadEnc").onclick = () =>
downloadCanvas(document.getElementById("encryptedCanvas"), "encrypted.png");
document.getElementById("downloadDec").onclick = () =>
downloadCanvas(document.getElementById("decryptedCanvas"), "decrypted.png");
</script>
</body>
</html>
No comments:
Post a Comment