120 lines
4.2 KiB
PHP
120 lines
4.2 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Editor de Documentos</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.css" rel="stylesheet">
|
|
<style>
|
|
.editor-container { padding: 20px; }
|
|
.img-container { max-height: 70vh; margin-bottom: 20px; }
|
|
.toolbar { margin: 15px 0; }
|
|
.toolbar button { margin: 0 5px; padding: 8px 15px; }
|
|
.range-control { margin: 10px 0; }
|
|
.range-control label { display: inline-block; width: 100px; }
|
|
.range-control input { width: 200px; }
|
|
#preview { max-width: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="editor-container">
|
|
<div class="img-container">
|
|
<img id="preview" src="">
|
|
</div>
|
|
|
|
<div class="toolbar">
|
|
<button onclick="applyCrop()">Recortar</button>
|
|
<button onclick="resetCrop()">Reset</button>
|
|
<button onclick="autoAdjust()">Otimização Automática</button>
|
|
<button onclick="saveImage()">Salvar</button>
|
|
</div>
|
|
|
|
<div class="adjustments">
|
|
<div class="range-control">
|
|
<label>Brilho:</label>
|
|
<input type="range" min="-100" max="100" value="0" id="brightness" oninput="adjustImage()">
|
|
</div>
|
|
<div class="range-control">
|
|
<label>Contraste:</label>
|
|
<input type="range" min="-100" max="100" value="0" id="contrast" oninput="adjustImage()">
|
|
</div>
|
|
<div class="range-control">
|
|
<label>Saturação:</label>
|
|
<input type="range" min="-100" max="100" value="0" id="saturation" oninput="adjustImage()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.js"></script>
|
|
<script>
|
|
let cropper;
|
|
let originalImage;
|
|
|
|
window.onload = function() {
|
|
const preview = document.getElementById('preview');
|
|
preview.src = localStorage.getItem('tempImage');
|
|
|
|
cropper = new Cropper(preview, {
|
|
viewMode: 2,
|
|
dragMode: 'move',
|
|
autoCropArea: 1,
|
|
restore: false
|
|
});
|
|
|
|
// Guardar imagem original para os ajustes
|
|
originalImage = preview.src;
|
|
};
|
|
|
|
function adjustImage() {
|
|
const brightness = document.getElementById('brightness').value;
|
|
const contrast = document.getElementById('contrast').value;
|
|
const saturation = document.getElementById('saturation').value;
|
|
|
|
cropper.getCroppedCanvas().style.filter = `
|
|
brightness(${100 + parseInt(brightness)}%)
|
|
contrast(${100 + parseInt(contrast)}%)
|
|
saturate(${100 + parseInt(saturation)}%)
|
|
`;
|
|
}
|
|
|
|
function autoAdjust() {
|
|
// Implementar otimização automática via backend
|
|
fetch('auto_adjust.php', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
image: cropper.getCroppedCanvas().toDataURL()
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
cropper.replace(data.imageUrl);
|
|
}
|
|
});
|
|
}
|
|
|
|
function saveImage() {
|
|
const canvas = cropper.getCroppedCanvas();
|
|
canvas.toBlob(function(blob) {
|
|
const formData = new FormData();
|
|
formData.append('image', blob);
|
|
formData.append('client_id', localStorage.getItem('tempClientId'));
|
|
formData.append('doc_type', localStorage.getItem('tempDocType'));
|
|
|
|
fetch('save_edited.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
window.parent.postMessage({
|
|
type: 'documentSaved',
|
|
data: data
|
|
}, '*');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|