Estiliza pagina de upload externo - responsiva (novo47)
This commit is contained in:
rodrigo committed
1 parent
05cd7b9c79
commit
9b55f8bf89
14 files changed
+1487
-24
No files matched your search
+477
@@ -0,0 +1,477 @@
|
||||
<!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>
|
||||
Reference in new issue
Block a user