fb55878727
- Flip gradient to purple→blue (eggplant #4a2860 → blue #5570d4) - Add gold title styling (.title-gold) for Stegasoo branding - Style two-choice toggles with gradient-matched purple/blue colors - Equal-width toggle buttons with hover highlight - Tools page: green→amber tab gradient with dark background - Dashed separator between toggle options 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
757 lines
28 KiB
HTML
757 lines
28 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Tools - Stegasoo{% endblock %}
|
||
|
||
{% block content %}
|
||
<style>
|
||
/* Tool drop zone - compact */
|
||
.tool-drop-zone {
|
||
position: relative;
|
||
min-height: 120px;
|
||
border: 2px dashed rgba(255, 255, 255, 0.2);
|
||
border-radius: 8px;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
transition: all 0.3s ease;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tool-drop-zone.drag-over {
|
||
border-color: #63b3ed;
|
||
background: rgba(99, 179, 237, 0.1);
|
||
}
|
||
|
||
.tool-drop-zone input[type="file"] {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
z-index: 10;
|
||
}
|
||
|
||
.tool-drop-zone .drop-label {
|
||
text-align: center;
|
||
padding: 25px 20px;
|
||
}
|
||
|
||
.tool-drop-zone .drop-icon {
|
||
font-size: 2rem;
|
||
color: rgba(255, 255, 255, 0.3);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tool-drop-zone.drag-over .drop-icon {
|
||
color: #63b3ed;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* Preview state */
|
||
.tool-drop-zone.has-file .drop-label {
|
||
display: none;
|
||
}
|
||
|
||
.tool-drop-zone .preview-container {
|
||
display: none;
|
||
padding: 12px;
|
||
}
|
||
|
||
.tool-drop-zone.has-file .preview-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.tool-drop-zone .preview-thumb {
|
||
width: 70px;
|
||
height: 70px;
|
||
object-fit: cover;
|
||
border-radius: 6px;
|
||
border: 2px solid rgba(99, 179, 237, 0.5);
|
||
}
|
||
|
||
.tool-drop-zone .preview-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.tool-drop-zone .preview-name {
|
||
font-weight: 600;
|
||
color: #63b3ed;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.tool-drop-zone .preview-meta {
|
||
font-size: 0.8rem;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.tool-drop-zone .preview-clear {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
z-index: 20;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.tool-drop-zone .preview-clear:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Result panels */
|
||
.result-panel {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* EXIF table styling */
|
||
.exif-table {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.exif-table th {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
position: sticky;
|
||
top: 0;
|
||
}
|
||
|
||
.exif-table td {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.exif-input {
|
||
background: rgba(0, 0, 0, 0.3) !important;
|
||
border: 1px solid rgba(99, 179, 237, 0.3) !important;
|
||
color: #63b3ed !important;
|
||
font-family: monospace;
|
||
font-size: 0.8rem;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
.exif-input:focus {
|
||
border-color: #63b3ed !important;
|
||
box-shadow: 0 0 10px rgba(99, 179, 237, 0.2) !important;
|
||
}
|
||
|
||
/* Processing state */
|
||
.processing .tool-drop-zone {
|
||
pointer-events: none;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.processing .btn {
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Tool section visibility */
|
||
.tool-section { display: none; }
|
||
.tool-section.active { display: block; }
|
||
|
||
/* Green→amber gradient (12.5% lighter) */
|
||
.tool-tabs .btn-outline-primary {
|
||
background-color: rgba(0, 0, 0, 0.25);
|
||
}
|
||
.tool-tabs .btn-outline-primary:nth-of-type(1) {
|
||
color: #40d770;
|
||
border-color: #40d770;
|
||
}
|
||
.tool-tabs .btn-outline-primary:nth-of-type(2) {
|
||
color: #96da2c;
|
||
border-color: #96da2c;
|
||
}
|
||
.tool-tabs .btn-outline-primary:nth-of-type(3) {
|
||
color: #fdda64;
|
||
border-color: #fdda64;
|
||
}
|
||
|
||
.tool-tabs .btn-outline-primary:nth-of-type(1):hover {
|
||
background-color: rgba(64, 215, 112, 0.15);
|
||
}
|
||
.tool-tabs .btn-outline-primary:nth-of-type(2):hover {
|
||
background-color: rgba(150, 218, 44, 0.15);
|
||
}
|
||
.tool-tabs .btn-outline-primary:nth-of-type(3):hover {
|
||
background-color: rgba(253, 218, 100, 0.15);
|
||
}
|
||
|
||
.tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(1) {
|
||
background-color: #40d770;
|
||
border-color: #40d770;
|
||
color: #1a1a2e;
|
||
}
|
||
.tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(2) {
|
||
background-color: #96da2c;
|
||
border-color: #96da2c;
|
||
color: #1a1a2e;
|
||
}
|
||
.tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(3) {
|
||
background-color: #fdda64;
|
||
border-color: #fdda64;
|
||
color: #1a1a2e;
|
||
}
|
||
</style>
|
||
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5 class="mb-0"><i class="bi bi-tools me-2"></i>Image Security Toolkit</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- Tool Selector Tabs -->
|
||
<div class="btn-group tool-tabs w-100 mb-4" role="group">
|
||
<input type="radio" class="btn-check" name="tool_type" id="toolCapacity" value="capacity" checked>
|
||
<label class="btn btn-outline-primary" for="toolCapacity">
|
||
<i class="bi bi-rulers me-1"></i> Capacity
|
||
</label>
|
||
<input type="radio" class="btn-check" name="tool_type" id="toolExif" value="exif">
|
||
<label class="btn btn-outline-primary" for="toolExif">
|
||
<i class="bi bi-card-text me-1"></i> EXIF
|
||
</label>
|
||
<input type="radio" class="btn-check" name="tool_type" id="toolStrip" value="strip">
|
||
<label class="btn btn-outline-primary" for="toolStrip">
|
||
<i class="bi bi-eraser me-1"></i> Strip
|
||
</label>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- CAPACITY CALCULATOR -->
|
||
<!-- ============================================================ -->
|
||
<div class="tool-section active" id="capacitySection">
|
||
<p class="text-muted small mb-3">Check how much data can be hidden in an image</p>
|
||
|
||
<div class="tool-drop-zone" id="capacityZone">
|
||
<input type="file" accept="image/*" id="capacityFile">
|
||
<div class="drop-label">
|
||
<i class="bi bi-image drop-icon d-block mb-2"></i>
|
||
<span class="text-muted">Drop image or click to browse</span>
|
||
</div>
|
||
<div class="preview-container">
|
||
<img class="preview-thumb" id="capacityThumb">
|
||
<div class="preview-info">
|
||
<div class="preview-name" id="capacityName">image.jpg</div>
|
||
<div class="preview-meta" id="capacityMeta">-- × -- · -- MB</div>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary preview-clear d-none" id="capacityClear">
|
||
<i class="bi bi-x"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Results -->
|
||
<div class="result-panel p-3 mt-3 d-none" id="capacityResult">
|
||
<div class="row text-center">
|
||
<div class="col-6 col-md-3 mb-3 mb-md-0">
|
||
<div class="text-muted small">Dimensions</div>
|
||
<div class="fw-bold" id="capDimensions">--</div>
|
||
</div>
|
||
<div class="col-6 col-md-3 mb-3 mb-md-0">
|
||
<div class="text-muted small">Megapixels</div>
|
||
<div class="fw-bold" id="capMegapixels">--</div>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<div class="text-muted small">LSB Capacity</div>
|
||
<div class="fw-bold text-primary" id="capLsb">--</div>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<div class="text-muted small">DCT Capacity</div>
|
||
<div class="fw-bold text-warning" id="capDct">--</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- EXIF EDITOR -->
|
||
<!-- ============================================================ -->
|
||
<div class="tool-section" id="exifSection">
|
||
<p class="text-muted small mb-3">View, edit, or remove image metadata</p>
|
||
|
||
<div class="tool-drop-zone" id="exifZone">
|
||
<input type="file" accept="image/*" id="exifFile">
|
||
<div class="drop-label">
|
||
<i class="bi bi-card-image drop-icon d-block mb-2"></i>
|
||
<span class="text-muted">Drop image or click to browse</span>
|
||
</div>
|
||
<div class="preview-container">
|
||
<img class="preview-thumb" id="exifThumb">
|
||
<div class="preview-info">
|
||
<div class="preview-name" id="exifName">image.jpg</div>
|
||
<div class="preview-meta"><span id="exifFieldCount">0</span> metadata fields</div>
|
||
<div id="exifNotEditable" class="text-warning small d-none">
|
||
<i class="bi bi-exclamation-triangle me-1"></i>Non-JPEG: clear only
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary preview-clear d-none" id="exifClear">
|
||
<i class="bi bi-x"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- EXIF Data Editor -->
|
||
<div id="exifEditor" class="d-none mt-3">
|
||
<div class="table-responsive result-panel" style="max-height: 250px; overflow-y: auto;">
|
||
<table class="table table-sm table-dark table-hover exif-table mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 35%">Field</th>
|
||
<th>Value</th>
|
||
<th style="width: 40px"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="exifTable"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="exifEmpty" class="result-panel text-muted text-center py-4 d-none">
|
||
<i class="bi bi-inbox fs-4 d-block mb-2"></i>No metadata found
|
||
</div>
|
||
|
||
<!-- Action Buttons -->
|
||
<div class="d-flex gap-2 mt-3 pt-3 border-top border-secondary">
|
||
<button type="button" class="btn btn-outline-danger" id="exifClearAll">
|
||
<i class="bi bi-trash me-1"></i>Clear All
|
||
</button>
|
||
<div class="ms-auto d-flex gap-2">
|
||
<button type="button" class="btn btn-outline-secondary" id="exifDiscard">
|
||
Discard
|
||
</button>
|
||
<button type="button" class="btn btn-primary" id="exifSave" disabled>
|
||
<i class="bi bi-download me-1"></i>Save
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- STRIP METADATA -->
|
||
<!-- ============================================================ -->
|
||
<div class="tool-section" id="stripSection">
|
||
<p class="text-muted small mb-3">Remove all EXIF data and get a clean image</p>
|
||
|
||
<div class="tool-drop-zone" id="stripZone">
|
||
<input type="file" accept="image/*" id="stripFile">
|
||
<div class="drop-label">
|
||
<i class="bi bi-file-earmark-x drop-icon d-block mb-2"></i>
|
||
<span class="text-muted">Drop image or click to browse</span>
|
||
</div>
|
||
<div class="preview-container">
|
||
<img class="preview-thumb" id="stripThumb">
|
||
<div class="preview-info">
|
||
<div class="preview-name" id="stripName">image.jpg</div>
|
||
<div class="preview-meta" id="stripMeta">--</div>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary preview-clear d-none" id="stripClearBtn">
|
||
<i class="bi bi-x"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Format selector and action -->
|
||
<div id="stripOptions" class="d-none mt-3">
|
||
<div class="d-flex align-items-center gap-3">
|
||
<label class="form-label mb-0 small text-muted">Output:</label>
|
||
<select class="form-select form-select-sm" id="stripFormat" style="width: auto;">
|
||
<option value="PNG" selected>PNG (lossless)</option>
|
||
<option value="JPEG">JPEG</option>
|
||
</select>
|
||
<button type="button" class="btn btn-danger ms-auto" id="stripAction">
|
||
<i class="bi bi-eraser me-1"></i>Strip & Download
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
// ============================================================================
|
||
// TAB SWITCHING
|
||
// ============================================================================
|
||
|
||
const toolRadios = document.querySelectorAll('input[name="tool_type"]');
|
||
const toolSections = {
|
||
capacity: document.getElementById('capacitySection'),
|
||
exif: document.getElementById('exifSection'),
|
||
strip: document.getElementById('stripSection')
|
||
};
|
||
|
||
function switchTool() {
|
||
const selected = document.querySelector('input[name="tool_type"]:checked').value;
|
||
Object.entries(toolSections).forEach(([key, section]) => {
|
||
section.classList.toggle('active', key === selected);
|
||
});
|
||
}
|
||
|
||
toolRadios.forEach(radio => radio.addEventListener('change', switchTool));
|
||
|
||
// ============================================================================
|
||
// SHARED - Drop zone helpers
|
||
// ============================================================================
|
||
|
||
function setupDropZone(zoneId, fileInputId, onFile) {
|
||
const zone = document.getElementById(zoneId);
|
||
const input = document.getElementById(fileInputId);
|
||
if (!zone || !input) return;
|
||
|
||
zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag-over'); });
|
||
zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
|
||
zone.addEventListener('drop', e => {
|
||
e.preventDefault();
|
||
zone.classList.remove('drag-over');
|
||
if (e.dataTransfer.files[0]) {
|
||
input.files = e.dataTransfer.files;
|
||
input.dispatchEvent(new Event('change'));
|
||
}
|
||
});
|
||
|
||
input.addEventListener('change', function() {
|
||
if (this.files[0]) onFile(this.files[0]);
|
||
});
|
||
}
|
||
|
||
function showPreview(zoneId, file, thumbId, nameId, metaText, clearBtnId) {
|
||
const zone = document.getElementById(zoneId);
|
||
const thumb = document.getElementById(thumbId);
|
||
const name = document.getElementById(nameId);
|
||
const clearBtn = document.getElementById(clearBtnId);
|
||
|
||
zone.classList.add('has-file');
|
||
name.textContent = file.name;
|
||
|
||
if (metaText) {
|
||
const metaEl = name.nextElementSibling;
|
||
if (metaEl) metaEl.textContent = metaText;
|
||
}
|
||
|
||
const reader = new FileReader();
|
||
reader.onload = e => thumb.src = e.target.result;
|
||
reader.readAsDataURL(file);
|
||
|
||
clearBtn?.classList.remove('d-none');
|
||
}
|
||
|
||
function clearDropZone(zoneId, fileInputId, clearBtnId, extraCleanup) {
|
||
const zone = document.getElementById(zoneId);
|
||
const input = document.getElementById(fileInputId);
|
||
const clearBtn = document.getElementById(clearBtnId);
|
||
|
||
zone?.classList.remove('has-file');
|
||
if (input) input.value = '';
|
||
clearBtn?.classList.add('d-none');
|
||
if (extraCleanup) extraCleanup();
|
||
}
|
||
|
||
function formatBytes(bytes) {
|
||
if (bytes < 1024) return bytes + ' B';
|
||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
||
}
|
||
|
||
// ============================================================================
|
||
// CAPACITY CALCULATOR
|
||
// ============================================================================
|
||
|
||
setupDropZone('capacityZone', 'capacityFile', async (file) => {
|
||
showPreview('capacityZone', file, 'capacityThumb', 'capacityName', formatBytes(file.size), 'capacityClear');
|
||
|
||
const formData = new FormData();
|
||
formData.append('image', file);
|
||
|
||
try {
|
||
const res = await fetch('/api/tools/capacity', { method: 'POST', body: formData });
|
||
const data = await res.json();
|
||
|
||
if (data.success) {
|
||
document.getElementById('capacityMeta').textContent =
|
||
`${data.width} × ${data.height} · ${formatBytes(file.size)}`;
|
||
document.getElementById('capDimensions').textContent = `${data.width} × ${data.height}`;
|
||
document.getElementById('capMegapixels').textContent = data.megapixels + ' MP';
|
||
document.getElementById('capLsb').textContent = data.lsb.capacity_kb.toFixed(1) + ' KB';
|
||
document.getElementById('capDct').textContent = data.dct.available
|
||
? data.dct.capacity_kb.toFixed(1) + ' KB'
|
||
: 'N/A';
|
||
document.getElementById('capacityResult').classList.remove('d-none');
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
}
|
||
});
|
||
|
||
document.getElementById('capacityClear')?.addEventListener('click', () => {
|
||
clearDropZone('capacityZone', 'capacityFile', 'capacityClear', () => {
|
||
document.getElementById('capacityResult').classList.add('d-none');
|
||
});
|
||
});
|
||
|
||
// ============================================================================
|
||
// EXIF EDITOR
|
||
// ============================================================================
|
||
|
||
let exifOriginalData = {};
|
||
let exifCurrentData = {};
|
||
let exifEditable = false;
|
||
let exifCurrentFile = null;
|
||
|
||
setupDropZone('exifZone', 'exifFile', async (file) => {
|
||
exifCurrentFile = file;
|
||
showPreview('exifZone', file, 'exifThumb', 'exifName', '', 'exifClear');
|
||
|
||
const formData = new FormData();
|
||
formData.append('image', file);
|
||
|
||
try {
|
||
const res = await fetch('/api/tools/exif', { method: 'POST', body: formData });
|
||
const data = await res.json();
|
||
|
||
if (data.success) {
|
||
exifOriginalData = JSON.parse(JSON.stringify(data.exif));
|
||
exifCurrentData = JSON.parse(JSON.stringify(data.exif));
|
||
exifEditable = data.editable;
|
||
|
||
document.getElementById('exifFieldCount').textContent = data.field_count;
|
||
document.getElementById('exifNotEditable').classList.toggle('d-none', data.editable);
|
||
document.getElementById('exifEditor').classList.remove('d-none');
|
||
|
||
renderExifTable();
|
||
updateSaveButton();
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
}
|
||
});
|
||
|
||
document.getElementById('exifClear')?.addEventListener('click', () => {
|
||
clearDropZone('exifZone', 'exifFile', 'exifClear', () => {
|
||
document.getElementById('exifEditor').classList.add('d-none');
|
||
exifCurrentFile = null;
|
||
exifOriginalData = {};
|
||
exifCurrentData = {};
|
||
});
|
||
});
|
||
|
||
function renderExifTable() {
|
||
const tbody = document.getElementById('exifTable');
|
||
const empty = document.getElementById('exifEmpty');
|
||
const entries = Object.entries(exifCurrentData).sort((a, b) => a[0].localeCompare(b[0]));
|
||
|
||
if (entries.length === 0) {
|
||
tbody.innerHTML = '';
|
||
empty.classList.remove('d-none');
|
||
return;
|
||
}
|
||
|
||
empty.classList.add('d-none');
|
||
tbody.innerHTML = entries.map(([key, value]) => {
|
||
let displayVal = typeof value === 'object' ? JSON.stringify(value) : value;
|
||
if (typeof displayVal === 'string' && displayVal.length > 50) {
|
||
displayVal = displayVal.substring(0, 47) + '...';
|
||
}
|
||
|
||
const editableFields = ['Make', 'Model', 'Software', 'Artist', 'Copyright', 'ImageDescription', 'DateTime', 'DateTimeOriginal', 'DateTimeDigitized', 'UserComment', 'LensMake', 'LensModel'];
|
||
const canEdit = exifEditable && editableFields.includes(key) && typeof value === 'string';
|
||
|
||
return `
|
||
<tr data-field="${key}">
|
||
<td class="text-muted small">${key}</td>
|
||
<td class="font-monospace small">
|
||
${canEdit
|
||
? `<input type="text" class="form-control form-control-sm exif-input"
|
||
value="${String(value).replace(/"/g, '"')}" data-field="${key}">`
|
||
: `<span title="${String(displayVal)}">${displayVal}</span>`
|
||
}
|
||
</td>
|
||
<td>
|
||
${canEdit
|
||
? `<button class="btn btn-sm btn-outline-danger border-0 exif-delete" data-field="${key}" title="Remove">
|
||
<i class="bi bi-x"></i>
|
||
</button>`
|
||
: ''
|
||
}
|
||
</td>
|
||
</tr>
|
||
`;
|
||
}).join('');
|
||
|
||
tbody.querySelectorAll('.exif-input').forEach(input => {
|
||
input.addEventListener('input', function() {
|
||
exifCurrentData[this.dataset.field] = this.value;
|
||
updateSaveButton();
|
||
});
|
||
});
|
||
|
||
tbody.querySelectorAll('.exif-delete').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
delete exifCurrentData[this.dataset.field];
|
||
renderExifTable();
|
||
updateSaveButton();
|
||
});
|
||
});
|
||
}
|
||
|
||
function updateSaveButton() {
|
||
const changed = JSON.stringify(exifCurrentData) !== JSON.stringify(exifOriginalData);
|
||
document.getElementById('exifSave').disabled = !changed;
|
||
}
|
||
|
||
document.getElementById('exifClearAll')?.addEventListener('click', async function() {
|
||
if (!exifCurrentFile) return;
|
||
if (!confirm('Remove all metadata from this image?')) return;
|
||
|
||
const formData = new FormData();
|
||
formData.append('image', exifCurrentFile);
|
||
formData.append('format', 'PNG');
|
||
|
||
const btn = this;
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Clearing...';
|
||
|
||
try {
|
||
const res = await fetch('/api/tools/exif/clear', { method: 'POST', body: formData });
|
||
if (res.ok) {
|
||
const blob = await res.blob();
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = res.headers.get('Content-Disposition')?.split('filename=')[1]?.replace(/"/g, '') || 'clean.png';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
|
||
exifCurrentData = {};
|
||
exifOriginalData = {};
|
||
renderExifTable();
|
||
} else {
|
||
alert('Failed to clear metadata');
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
alert('Failed to clear metadata: ' + err.message);
|
||
} finally {
|
||
btn.disabled = false;
|
||
btn.innerHTML = '<i class="bi bi-trash me-1"></i>Clear All';
|
||
}
|
||
});
|
||
|
||
document.getElementById('exifDiscard')?.addEventListener('click', function() {
|
||
exifCurrentData = JSON.parse(JSON.stringify(exifOriginalData));
|
||
renderExifTable();
|
||
updateSaveButton();
|
||
});
|
||
|
||
document.getElementById('exifSave')?.addEventListener('click', async function() {
|
||
if (!exifCurrentFile || !exifEditable) return;
|
||
|
||
const updates = {};
|
||
for (const [key, val] of Object.entries(exifCurrentData)) {
|
||
if (exifOriginalData[key] !== val) updates[key] = val;
|
||
}
|
||
for (const key of Object.keys(exifOriginalData)) {
|
||
if (!(key in exifCurrentData)) updates[key] = null;
|
||
}
|
||
|
||
if (Object.keys(updates).length === 0) return;
|
||
|
||
const formData = new FormData();
|
||
formData.append('image', exifCurrentFile);
|
||
formData.append('updates', JSON.stringify(updates));
|
||
|
||
const btn = this;
|
||
const originalHtml = btn.innerHTML;
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Saving...';
|
||
|
||
try {
|
||
const res = await fetch('/api/tools/exif/update', { method: 'POST', body: formData });
|
||
if (res.ok) {
|
||
const blob = await res.blob();
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = res.headers.get('Content-Disposition')?.split('filename=')[1]?.replace(/"/g, '') || 'updated.jpg';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
|
||
exifOriginalData = JSON.parse(JSON.stringify(exifCurrentData));
|
||
updateSaveButton();
|
||
} else {
|
||
alert('Failed to save');
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
alert('Failed to save changes: ' + err.message);
|
||
} finally {
|
||
btn.disabled = false;
|
||
btn.innerHTML = originalHtml;
|
||
updateSaveButton();
|
||
}
|
||
});
|
||
|
||
// ============================================================================
|
||
// STRIP METADATA
|
||
// ============================================================================
|
||
|
||
let stripCurrentFile = null;
|
||
|
||
setupDropZone('stripZone', 'stripFile', (file) => {
|
||
stripCurrentFile = file;
|
||
showPreview('stripZone', file, 'stripThumb', 'stripName', formatBytes(file.size), 'stripClearBtn');
|
||
document.getElementById('stripMeta').textContent = formatBytes(file.size);
|
||
document.getElementById('stripOptions').classList.remove('d-none');
|
||
});
|
||
|
||
document.getElementById('stripClearBtn')?.addEventListener('click', () => {
|
||
clearDropZone('stripZone', 'stripFile', 'stripClearBtn', () => {
|
||
document.getElementById('stripOptions').classList.add('d-none');
|
||
stripCurrentFile = null;
|
||
});
|
||
});
|
||
|
||
document.getElementById('stripAction')?.addEventListener('click', async function() {
|
||
if (!stripCurrentFile) return;
|
||
|
||
const format = document.getElementById('stripFormat').value;
|
||
const formData = new FormData();
|
||
formData.append('image', stripCurrentFile);
|
||
formData.append('format', format);
|
||
|
||
const btn = this;
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Processing...';
|
||
|
||
try {
|
||
const res = await fetch('/api/tools/exif/clear', { method: 'POST', body: formData });
|
||
if (res.ok) {
|
||
const blob = await res.blob();
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = res.headers.get('Content-Disposition')?.split('filename=')[1]?.replace(/"/g, '') || `clean.${format.toLowerCase()}`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
} else {
|
||
alert('Failed to strip metadata');
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
alert('Failed to strip metadata: ' + err.message);
|
||
} finally {
|
||
btn.disabled = false;
|
||
btn.innerHTML = '<i class="bi bi-eraser me-1"></i>Strip & Download';
|
||
}
|
||
});
|
||
</script>
|
||
{% endblock %}
|