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>
        body { 
            margin: 0; 
            padding: 20px; 
            font-family: Arial, sans-serif;
            background: #f5f5f5;
        }
        .editor-container { 
            width: 95%;
            margin: 0 auto;
        }
        .img-container { 
            height: 70vh;
            margin-bottom: 20px;
            background: #fff;
            border: 1px solid #ddd;
        }
        .toolbar { 
            margin: 15px 0;
            text-align: center;
        }
        .toolbar button { 
            margin: 0 5px;
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .toolbar button:hover {
            background: #45a049;
        }
        .controls {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin: 20px 0;
        }
        .range-control { 
            background: #fff;
            padding: 15px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .range-control label { 
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .range-control input[type="range"] { 
            width: 100%;
        }
        #preview { 
            max-width: 100%;
            max-height: 70vh;
        }
    </style>
</head>
<body>
    <div class="editor-container">
        <div class="img-container">
            <img id="preview" src="">
        </div>
        
        <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 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: 1,
                dragMode: 'move',
                aspectRatio: NaN,
                autoCropArea: 1,
                restore: false,
                modal: true,
                guides: true,
                highlight: true,
                cropBoxMovable: true,
                cropBoxResizable: true,
                toggleDragModeOnDblclick: 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>