Hugging Face's logo

Spaces:
KEXEL
/
git
Running

App Files Community
KEXEL commited on
Commit
b8f68a8
路
verified 路
1 Parent(s): eb24f2a

1.1

Browse files
Files changed (1) hide show
  1. Editor-PDF +115 -0
Editor-PDF ADDED
@@ -0,0 +1,115 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>Editor de PDF</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.min.js"></script>
9
+ <style>
10
+ canvas {
11
+ border: 1px solid #ccc;
12
+ margin: 10px;
13
+ cursor: crosshair;
14
+ }
15
+ </style>
16
+ </head>
17
+ <body class="bg-gray-100 text-gray-800 min-h-screen flex flex-col items-center p-6">
18
+
19
+ <h1 class="text-3xl font-bold mb-6">馃搫 Editor de PDF</h1>
20
+
21
+ <input type="file" id="pdfInput" accept="application/pdf" class="mb-4 border p-2 rounded" />
22
+
23
+ <div class="flex space-x-4 mb-4">
24
+ <button id="prevPage" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">P谩gina Anterior</button>
25
+ <button id="nextPage" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Pr贸xima P谩gina</button>
26
+ <span id="pageInfo" class="text-lg self-center">P谩gina 1</span>
27
+ </div>
28
+
29
+ <div class="flex flex-col items-center">
30
+ <canvas id="pdfCanvas" class="bg-white shadow-lg"></canvas>
31
+
32
+ <div class="mt-4">
33
+ <button id="addTextBtn" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 mr-2">Adicionar Texto</button>
34
+ <button id="addRectBtn" class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 mr-2">Adicionar Ret芒ngulo</button>
35
+ <button id="downloadBtn" class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">Baixar como Imagem</button>
36
+ </div>
37
+ </div>
38
+
39
+ <script>
40
+ const fileInput = document.getElementById('pdfInput');
41
+ const canvas = document.getElementById('pdfCanvas');
42
+ const ctx = canvas.getContext('2d');
43
+ const prevPageBtn = document.getElementById('prevPage');
44
+ const nextPageBtn = document.getElementById('nextPage');
45
+ const pageInfo = document.getElementById('pageInfo');
46
+ const addTextBtn = document.getElementById('addTextBtn');
47
+ const addRectBtn = document.getElementById('addRectBtn');
48
+ const downloadBtn = document.getElementById('downloadBtn');
49
+
50
+ let pdfDoc = null;
51
+ let currentPage = 1;
52
+
53
+ pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.worker.min.js';
54
+
55
+ fileInput.addEventListener('change', async (e) => {
56
+ const file = e.target.files[0];
57
+ if (!file) return;
58
+ const fileReader = new FileReader();
59
+ fileReader.onload = async () => {
60
+ pdfDoc = await pdfjsLib.getDocument({ data: fileReader.result }).promise;
61
+ currentPage = 1;
62
+ renderPage(currentPage);
63
+ };
64
+ fileReader.readAsBinaryString(file);
65
+ });
66
+
67
+ function renderPage(pageNumber) {
68
+ if (!pdfDoc) return;
69
+ pdfDoc.getPage(pageNumber).then(async (page) => {
70
+ const viewport = page.getViewport({ scale: 1.5 });
71
+ canvas.width = viewport.width;
72
+ canvas.height = viewport.height;
73
+ await page.render({ canvasContext: ctx, viewport }).promise;
74
+ pageInfo.textContent = `P谩gina ${pageNumber} de ${pdfDoc.numPages}`;
75
+ });
76
+ }
77
+
78
+ prevPageBtn.addEventListener('click', () => {
79
+ if (currentPage > 1) {
80
+ currentPage--;
81
+ renderPage(currentPage);
82
+ }
83
+ });
84
+
85
+ nextPageBtn.addEventListener('click', () => {
86
+ if (currentPage < pdfDoc?.numPages) {
87
+ currentPage++;
88
+ renderPage(currentPage);
89
+ }
90
+ });
91
+
92
+ addTextBtn.addEventListener('click', () => {
93
+ const text = prompt("Digite o texto:");
94
+ if (text) {
95
+ ctx.fillStyle = 'red';
96
+ ctx.font = '20px Arial';
97
+ ctx.fillText(text, 50, 50);
98
+ }
99
+ });
100
+
101
+ addRectBtn.addEventListener('click', () => {
102
+ ctx.strokeStyle = 'blue';
103
+ ctx.lineWidth = 2;
104
+ ctx.strokeRect(100, 100, 150, 80);
105
+ });
106
+
107
+ downloadBtn.addEventListener('click', () => {
108
+ const link = document.createElement('a');
109
+ link.download = `pagina_${currentPage}.png`;
110
+ link.href = canvas.toDataURL();
111
+ link.click();
112
+ });
113
+ </script>
114
+ </body>
115
+ </html>