ferramentas/editor.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>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        body {
            display: flex;
            flex-direction: column;
            font-family: Arial, sans-serif;
            background: #f5f5f5;
        }
        .editor-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            padding: 15px;
            box-sizing: border-box;
            gap: 15px;
        }
        .img-container {
            flex: 1;
            position: relative;
            background: #fff;
            border: 1px solid #ddd;
            overflow: hidden;
            min-height: 0;
            max-height: calc(100vh - 300px);
        }
        .controls-section {
            flex: 0 0 auto;
            background: #fff;
            padding: 15px;
            border-radius: 4px;
        }
        .controls {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }
        .range-control {
            margin-bottom: 10px;
        }
        .range-control label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .range-control input[type="range"] {
            width: 100%;
        }
        .toolbar {
            padding: 10px;
            text-align: center;
            background: #fff;
            border-radius: 4px;
        }
        .toolbar button {
            margin: 0 5px;
            padding: 8px 15px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .toolbar button:hover {
            background: #45a049;
        }
        #preview {
            max-width: 100%;
            max-height: 100%;
        }
        .cropper-container {
            width: 100% !important;
            height: 100% !important;
        }
        .cropper-wrap-box {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="editor-container">
        <div class="img-container">
            <img id="preview" src="">
        </div>
        
        <div class="controls-section">
            <div class="controls">
                <div class="range-control">
                    <label>Brilho</label>
                    <input type="range" min="-100" max="100" value="0" id="brightness" oninput="adjustImage()">
                    <span id="brightnessValue">0</span>
                </div>
                <div class="range-control">
                    <label>Contraste</label>
                    <input type="range" min="-100" max="100" value="0" id="contrast" oninput="adjustImage()">
                    <span id="contrastValue">0</span>
                </div>
                <div class="range-control">
                    <label>Saturação</label>
                    <input type="range" min="-100" max="100" value="0" id="saturation" oninput="adjustImage()">
                    <span id="saturationValue">0</span>
                </div>
                <div class="range-control">
                    <label>Matiz</label>
                    <input type="range" min="-180" max="180" value="0" id="hue" oninput="adjustImage()">
                    <span id="hueValue">0</span>
                </div>
            </div>
        </div>

        <div class="toolbar">
            <button onclick="resetImage()">Resetar</button>
            <button onclick="rotateCCW()">Girar Esquerda</button>
            <button onclick="rotateCW()">Girar Direita</button>
            <button onclick="cropImage()">Recortar</button>
            <button onclick="autoAdjust()">Otimização Automática</button>
            <button onclick="saveImage()" style="background: #2196F3;">Salvar</button>
        </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');
            const imageUrl = localStorage.getItem('tempImage');
            preview.src = imageUrl;
            
            cropper = new Cropper(preview, {
                viewMode: 2,
                dragMode: 'move',
                aspectRatio: NaN,
                autoCropArea: 1,
                restore: false,
                modal: true,
                guides: true,
                highlight: true,
                cropBoxMovable: true,
                cropBoxResizable: true,
                toggleDragModeOnDblclick: true,
                responsive: true,
                checkOrientation: true
            });
        };

        function adjustImage() {
            const brightness = document.getElementById('brightness').value;
            const contrast = document.getElementById('contrast').value;
            const saturation = document.getElementById('saturation').value;
            const hue = document.getElementById('hue').value;

            // Atualizar valores exibidos
            document.getElementById('brightnessValue').textContent = brightness;
            document.getElementById('contrastValue').textContent = contrast;
            document.getElementById('saturationValue').textContent = saturation;
            document.getElementById('hueValue').textContent = hue;

            // Aplicar filtros
            const canvas = cropper.getCroppedCanvas();
            canvas.style.filter = `
                brightness(${100 + parseInt(brightness)}%) 
                contrast(${100 + parseInt(contrast)}%)
                saturate(${100 + parseInt(saturation)}%)
                hue-rotate(${hue}deg)
            `;
        }

        function resetImage() {
            cropper.reset();
            document.querySelectorAll('input[type="range"]').forEach(input => {
                input.value = 0;
                document.getElementById(input.id + 'Value').textContent = '0';
            });
            adjustImage();
        }

        function rotateCW() {
            cropper.rotate(90);
        }

        function rotateCCW() {
            cropper.rotate(-90);
        }

        function cropImage() {
            cropper.setDragMode('crop');
        }

        function autoAdjust() {
            // Implementar otimização automática aqui
            alert('Função em desenvolvimento');
        }

        function saveImage() {
            const canvas = cropper.getCroppedCanvas({
                maxWidth: 4096,
                maxHeight: 4096,
                fillColor: '#fff',
                imageSmoothingEnabled: true,
                imageSmoothingQuality: 'high',
            });

            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
                        }, '*');
                    } else {
                        alert('Erro ao salvar: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Erro:', error);
                    alert('Erro ao salvar documento');
                });
            }, 'image/jpeg', 0.95);
        }
    </script>
</body>
</html>