API tools faq
paste
Advertisement
Guest User

PDF Invert Colours

a guest
Dec 2nd, 2024
312
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.11 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Invert PDF Colors</title>
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
  8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  9.     <style>
  10.         body {
  11.             font-family: Arial, sans-serif;
  12.             background-color: #f4f4f9;
  13.             color: #333;
  14.             margin: 0;
  15.             padding: 0;
  16.             display: flex;
  17.             flex-direction: column;
  18.             align-items: center;
  19.             justify-content: center;
  20.             min-height: 100vh;
  21.         }
  22.  
  23.         h1 {
  24.             font-size: 2rem;
  25.             color: #444;
  26.             margin-bottom: 20px;
  27.         }
  28.  
  29.         .options {
  30.             margin-top: 20px;
  31.             display: flex;
  32.             flex-direction: column;
  33.             align-items: center;
  34.             gap: 10px;
  35.         }
  36.  
  37.         input[type="file"], input[type="text"], select, button {
  38.             padding: 10px;
  39.             font-size: 1rem;
  40.             border: 2px solid #bbb;
  41.             border-radius: 5px;
  42.             background-color: #fff;
  43.             transition: border-color 0.3s, background-color 0.3s;
  44.         }
  45.  
  46.         input[type="file"]:hover,
  47.         input[type="text"]:hover,
  48.         select:hover {
  49.             border-color: #888;
  50.         }
  51.  
  52.         button {
  53.             color: #fff;
  54.             background-color: #007bff;
  55.             border: none;
  56.             cursor: pointer;
  57.         }
  58.  
  59.         button:disabled {
  60.             background-color: #aaa;
  61.             cursor: not-allowed;
  62.         }
  63.  
  64.         button:hover:not(:disabled) {
  65.             background-color: #0056b3;
  66.             transform: scale(1.05);
  67.         }
  68.  
  69.         label {
  70.             display: block;
  71.             font-size: 0.9rem;
  72.             margin-bottom: 5px;
  73.         }
  74.     </style>
  75. </head>
  76. <body>
  77.     <h1>Invert PDF Colors</h1>
  78.     <input type="file" id="upload" accept=".pdf">
  79.     <div class="options">
  80.         <div>
  81.             <label for="file-name">File Name:</label>
  82.             <input type="text" id="file-name" placeholder="Enter file name" value="inverted_pdf">
  83.         </div>
  84.         <div>
  85.             <label for="resolution">Resolution (PPI):</label>
  86.             <select id="resolution">
  87.                 <option value="72">72 PPI (Low)</option>
  88.                 <option value="150">150 PPI (Medium)</option>
  89.                 <option value="300">300 PPI (High)</option>
  90.             </select>
  91.         </div>
  92.         <button id="download-button" disabled>Download Inverted PDF</button>
  93.     </div>
  94.  
  95.     <script>
  96.         const pdfjsLib = window['pdfjs-dist/build/pdf'];
  97.         pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
  98.  
  99.         const uploadInput = document.getElementById('upload');
  100.         const fileNameInput = document.getElementById('file-name');
  101.         const resolutionSelect = document.getElementById('resolution');
  102.         const downloadButton = document.getElementById('download-button');
  103.         let pdfInstance = null;
  104.  
  105.         uploadInput.addEventListener('change', async (event) => {
  106.             const file = event.target.files[0];
  107.             if (file && file.type === 'application/pdf') {
  108.                const url = URL.createObjectURL(file);
  109.                 try {
  110.                     pdfInstance = await pdfjsLib.getDocument(url).promise;
  111.                     downloadButton.disabled = false;
  112.                 } catch (error) {
  113.                     console.error('Error loading PDF:', error);
  114.                     alert('Error loading PDF. Please try again with a different file.');
  115.                 }
  116.             }
  117.         });
  118.  
  119.         downloadButton.addEventListener('click', async () => {
  120.             if (pdfInstance) {
  121.                 const { jsPDF } = window.jspdf;
  122.                 const fileName = fileNameInput.value.trim() || 'inverted_pdf';
  123.                 const resolution = parseInt(resolutionSelect.value);
  124.  
  125.                 let doc = null;
  126.  
  127.                 for (let pageNumber = 1; pageNumber <= pdfInstance.numPages; pageNumber++) {
  128.                    const page = await pdfInstance.getPage(pageNumber);
  129.                    const viewport = page.getViewport({ scale: resolution / 72 }); // Scale based on resolution
  130.  
  131.                    const canvas = document.createElement('canvas');
  132.                    const context = canvas.getContext('2d');
  133.                    canvas.width = viewport.width;
  134.                    canvas.height = viewport.height;
  135.  
  136.                    const renderContext = {
  137.                        canvasContext: context,
  138.                        viewport: viewport,
  139.                    };
  140.                    await page.render(renderContext).promise;
  141.  
  142.                    // Invert colors
  143.                    context.globalCompositeOperation = 'difference';
  144.                    context.fillStyle = 'white';
  145.                    context.fillRect(0, 0, canvas.width, canvas.height);
  146.  
  147.                    pageWidth = (viewport.width * 72) / resolution; // Preserve original size
  148.                    pageHeight = (viewport.height * 72) / resolution;
  149.  
  150.                    // Initialize jsPDF with the first page dimensions
  151.                    if (!doc) {
  152.                        doc = new jsPDF({
  153.                            orientation: pageWidth > pageHeight ? 'landscape' : 'portrait',
  154.                             unit: 'pt',
  155.                             format: [pageWidth, pageHeight],
  156.                         });
  157.                     } else {
  158.                         doc.addPage([pageWidth, pageHeight]);
  159.                         doc.setPage(pageNumber);
  160.                     }
  161.  
  162.                     // Add image to the PDF
  163.                     const imgData = canvas.toDataURL('image/jpeg');
  164.                     doc.addImage(imgData, 'JPEG', 0, 0, pageWidth, pageHeight);
  165.                 }
  166.  
  167.                 doc.save(`${fileName}.pdf`);
  168.             }
  169.         });
  170.     </script>
  171. </body>
  172. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!