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;
            height: calc(100vh - 400px); /* Altura calculada */
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .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 {
            display: block;
            max-width: 100%;
            max-height: 100%;
            margin: auto;
        }
        .cropper-container {
            margin: auto;
        }
        .thumbnails {
            height: 120px; /* Altura fixa */
            display: flex;
            gap: 10px;
            padding: 10px;
            overflow-x: auto;
            background: #fff;
            border-radius: 4px;
            flex-shrink: 0; /* Impede encolhimento */
        }
        .thumbnail {
            width: 100px;
            height: 100px;
            object-fit: cover;
            cursor: pointer;
            border: 2px solid transparent;
        }
        .thumbnail.active {
            border-color: #4CAF50;
        }
        #preview-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        #preview-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="editor-container">
        <div class="thumbnails" id="thumbnails">
            <!-- Miniaturas serão inseridas aqui -->
        </div>
        
        <div class="img-container">
            <div id="preview-container">
                <img id="preview" src="">
                <canvas id="preview-canvas"></canvas>
            </div>
        </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="combineImages()" style="background: #FF9800;">Unir Imagens</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 images = [];
        let currentImageIndex = 0;
        let currentFilters = {
            brightness: 100,
            contrast: 100,
            saturation: 100,
            hue: 0
        };

        function switchImage(index) {
            if (cropper) {
                cropper.destroy();
            }
            currentImageIndex = index;
            
            // Atualizar miniaturas
            document.querySelectorAll('.thumbnail').forEach((thumb, i) => {
                thumb.className = 'thumbnail' + (i === index ? ' active' : '');
            });

            // Carregar nova imagem
            initCropper(images[index].url);
        }

        window.onload = function() {
            try {
                const allImages = JSON.parse(localStorage.getItem('allImages')) || [];
                console.log('Imagens carregadas:', allImages);
                
                if (allImages.length > 0) {
                    images = allImages.map(img => ({
                        url: img.url,
                        filters: { ...currentFilters }
                    }));
                } else {
                    const baseUrl = localStorage.getItem('tempImage');
                    images = [{
                        url: baseUrl,
                        filters: { ...currentFilters }
                    }];
                }

                // Criar miniaturas
                const thumbnailsContainer = document.getElementById('thumbnails');
                thumbnailsContainer.innerHTML = '';
                
                images.forEach((image, index) => {
                    const thumb = document.createElement('img');
                    thumb.src = image.url;
                    thumb.className = 'thumbnail' + (index === 0 ? ' active' : '');
                    thumb.onclick = () => switchImage(index);
                    thumbnailsContainer.appendChild(thumb);
                });

                // Inicializar primeira imagem
                initCropper(images[0].url);
            } catch (error) {
                console.error('Erro ao inicializar editor:', error);
                alert('Erro ao carregar imagens: ' + error.message);
            }
        };

        function initCropper(url) {
            const preview = document.getElementById('preview');
            preview.src = url;
            
            if (cropper) {
                cropper.destroy();
            }

            // Aguardar imagem carregar antes de inicializar o cropper
            preview.onload = function() {
                cropper = new Cropper(preview, {
                    viewMode: 1,
                    dragMode: 'crop',
                    aspectRatio: NaN,
                    autoCropArea: 0.8,
                    restore: true,
                    modal: true,
                    guides: true,
                    center: true,
                    highlight: true,
                    cropBoxMovable: true,
                    cropBoxResizable: true,
                    toggleDragModeOnDblclick: false,
                    zoomable: true,
                    ready: function() {
                        // Mostrar área de recorte
                        this.cropper.crop();
                        // Restaurar filtros
                        currentFilters = { ...images[currentImageIndex].filters };
                        updateFilterInputs();
                    }
                });
            };
        }

        function updateFilterInputs() {
            document.getElementById('brightness').value = currentFilters.brightness - 100;
            document.getElementById('contrast').value = currentFilters.contrast - 100;
            document.getElementById('saturation').value = currentFilters.saturation - 100;
            document.getElementById('hue').value = currentFilters.hue;
            
            document.getElementById('brightnessValue').textContent = currentFilters.brightness - 100;
            document.getElementById('contrastValue').textContent = currentFilters.contrast - 100;
            document.getElementById('saturationValue').textContent = currentFilters.saturation - 100;
            document.getElementById('hueValue').textContent = currentFilters.hue;
        }

        function adjustImage() {
            currentFilters = {
                brightness: parseInt(document.getElementById('brightness').value) + 100,
                contrast: parseInt(document.getElementById('contrast').value) + 100,
                saturation: parseInt(document.getElementById('saturation').value) + 100,
                hue: parseInt(document.getElementById('hue').value)
            };

            // Salvar filtros para a imagem atual
            images[currentImageIndex].filters = { ...currentFilters };
            applyCurrentFilters();
        }

        function applyCurrentFilters() {
            if (!cropper) return;
            
            const canvas = cropper.getCroppedCanvas();
            if (!canvas || canvas.width === 0 || canvas.height === 0) return;

            try {
                const tempCanvas = document.createElement('canvas');
                tempCanvas.width = canvas.width;
                tempCanvas.height = canvas.height;
                
                const ctx = tempCanvas.getContext('2d');
                ctx.filter = `brightness(${currentFilters.brightness}%) 
                            contrast(${currentFilters.contrast}%) 
                            saturate(${currentFilters.saturation}%) 
                            hue-rotate(${currentFilters.hue}deg)`;
                
                ctx.drawImage(canvas, 0, 0);
                cropper.replace(tempCanvas.toDataURL('image/jpeg'));
            } catch (error) {
                console.error('Erro ao aplicar filtros:', error);
            }
        }

        async function combineImages() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            let totalHeight = 0;
            let maxWidth = 0;

            // Primeiro passo: calcular dimensões
            for (let image of images) {
                const img = await createImage(image.url);
                maxWidth = Math.max(maxWidth, img.width);
                totalHeight += img.height;
            }

            // Configurar canvas
            canvas.width = maxWidth;
            canvas.height = totalHeight;

            // Segundo passo: desenhar imagens
            let currentY = 0;
            for (let image of images) {
                const img = await createImage(image.url);
                ctx.drawImage(img, 0, currentY);
                currentY += img.height;
            }

            // Atualizar preview
            initCropper(canvas.toDataURL('image/jpeg'));
        }

        function createImage(url) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = () => resolve(img);
                img.onerror = reject;
                img.src = url;
            });
        }

        function resetImage() {
            if (cropper) {
                cropper.reset();
                currentFilters = {
                    brightness: 100,
                    contrast: 100,
                    saturation: 100,
                    hue: 0
                };
                images[currentImageIndex].filters = { ...currentFilters };
                updateFilterInputs();
                applyCurrentFilters();
            }
        }

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

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

        function cropImage() {
            if (cropper) {
                cropper.setDragMode('crop');
                const cropBox = document.querySelector('.cropper-crop-box');
                if (cropBox) {
                    cropBox.style.display = 'block';
                }
                // Forçar modo de recorte
                cropper.crop();
            }
        }

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

        function saveImage() {
            if (!cropper) {
                alert('Editor não inicializado corretamente');
                return;
            }

            try {
                // Obter canvas com filtros aplicados
                const canvas = cropper.getCroppedCanvas({
                    maxWidth: 4096,
                    maxHeight: 4096,
                    fillColor: '#fff',
                    imageSmoothingEnabled: true,
                    imageSmoothingQuality: 'high',
                });

                if (!canvas) {
                    throw new Error('Não foi possível gerar a imagem');
                }

                // Aplicar filtros no canvas final
                const finalCanvas = document.createElement('canvas');
                finalCanvas.width = canvas.width;
                finalCanvas.height = canvas.height;
                const ctx = finalCanvas.getContext('2d');

                // Aplicar filtros
                ctx.filter = `brightness(${currentFilters.brightness}%) 
                             contrast(${currentFilters.contrast}%) 
                             saturate(${currentFilters.saturation}%) 
                             hue-rotate(${currentFilters.hue}deg)`;
                
                // Desenhar imagem com filtros
                ctx.drawImage(canvas, 0, 0);

                // Converter para blob e enviar
                finalCanvas.toBlob(function(blob) {
                    if (!blob) {
                        throw new Error('Erro ao gerar arquivo');
                    }

                    const formData = new FormData();
                    formData.append('image', blob);
                    formData.append('client_id', localStorage.getItem('tempClientId'));
                    formData.append('doc_type', localStorage.getItem('tempDocType'));

                    fetch('index.php?page=save_edited', {
                        method: 'POST',
                        body: formData
                    })
                    .then(async response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            window.parent.postMessage({
                                type: 'documentSaved',
                                data: data
                            }, '*');
                        } else {
                            throw new Error(data.message || 'Erro desconhecido');
                        }
                    })
                    .catch(error => {
                        console.error('Erro ao salvar:', error);
                        alert('Erro ao salvar documento: ' + error.message);
                    });
                }, 'image/jpeg', 0.95);

            } catch (error) {
                console.error('Erro ao processar imagem:', error);
                alert('Erro ao processar imagem: ' + error.message);
            }
        }
    </script>
</body>
</html>