Estiliza pagina de upload externo - responsiva (novo47)

2025-02-07 14:38:07 -03:00
1 parent 05cd7b9c79
commit 8ef40e7fb5
@@ -0,0 +1,119 @@
+<!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>