diff --git a/image-to-pdf-app/README.md b/image-to-pdf-app/README.md new file mode 100644 index 0000000..e474a38 --- /dev/null +++ b/image-to-pdf-app/README.md @@ -0,0 +1,31 @@ + +## Project Overview +The Image to PDF Converter is a web-based application that allows users to easily convert their JPEG images into PDF format. This application simplifies the process of converting images to PDFs, making it accessible to anyone with a web browser. + +## Installation Instructions +As this application is web-based, there's no need for a traditional installation. However, to run it locally on your machine, you can use Python's HTTP server module by following these steps: +1. Ensure you have Python installed on your computer. You can download it from https://www.python.org/downloads/. +2. Open your terminal or command prompt. +3. Navigate to the directory where you have saved the project files. +4. Run the command `python -m http.server` (for Python 3.x) or `python -m SimpleHTTPServer` (for Python 2.x). +5. Open a web browser and visit `http://localhost:8000` to access the application. + +## Usage Guide +To use the Image to PDF Converter, follow these steps: +1. Load the web application in your web browser by navigating to the URL provided by the local server setup. +2. On the homepage, click the "Convert JPEG to PDF" button. +3. You will be prompted to select the JPEG image(s) you wish to convert. +4. After selecting the images, click the "Convert to PDF" button to initiate the conversion process. +5. Once the conversion is complete, you can download the resulting PDF file to your local device. + +## Prerequisites +- **Browser Compatibility**: The application is compatible with modern web browsers such as Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. +- **JavaScript Libraries**: The application uses the jsPDF library to perform the image to PDF conversion. This library is included via CDN, so there's no need for manual installation. + +## Screenshots +- **Image Selection**: A screenshot showing how to select images for conversion. +- **Conversion Process**: A screenshot depicting the conversion process. +- **PDF Download**: A screenshot illustrating the option to download the converted PDF. + +## Acknowledgments +This project makes use of the jsPDF library for converting images to PDF format. jsPDF is a powerful library that simplifies the process of generating PDF documents using JavaScript. More information about jsPDF can be found at their official GitHub repository: https://github.com/MrRio/jsPDF. \ No newline at end of file diff --git a/image-to-pdf-app/index.html b/image-to-pdf-app/index.html new file mode 100644 index 0000000..70bcb8f --- /dev/null +++ b/image-to-pdf-app/index.html @@ -0,0 +1,22 @@ + + + + + Image to PDF Converter + + + +
+

Welcome to the Image to PDF Converter

+
+
+
+

Convert your JPEG images to PDF in a snap!

+ +
+
+ + + \ No newline at end of file diff --git a/image-to-pdf-app/jpeg-to-pdf.html b/image-to-pdf-app/jpeg-to-pdf.html new file mode 100644 index 0000000..ec8db77 --- /dev/null +++ b/image-to-pdf-app/jpeg-to-pdf.html @@ -0,0 +1,29 @@ + + + + + Convert JPEG to PDF + + + + + +
+

Convert Your JPEG Images to PDF

+ +
+
+
+

Select a JPEG file from your device and click on "Convert to PDF" to start the conversion process.

+ + + +
+
+ + + \ No newline at end of file diff --git a/image-to-pdf-app/script.js b/image-to-pdf-app/script.js new file mode 100644 index 0000000..fb30d30 --- /dev/null +++ b/image-to-pdf-app/script.js @@ -0,0 +1,49 @@ + +document.addEventListener("DOMContentLoaded", function() { + const uploadInput = document.getElementById("jpeg-upload"); + const convertButton = document.getElementById("convert-button"); + const downloadLink = document.getElementById("download-link"); + + // Validate the file input to ensure it's a JPEG file + uploadInput.addEventListener("change", function() { + const file = uploadInput.files[0]; + if (file.type !== "image/jpeg") { + alert("Please select a JPEG file."); + uploadInput.value = ""; // Reset the input + } + }); + + // Convert the uploaded JPEG to PDF + convertButton.addEventListener("click", function() { + const file = uploadInput.files[0]; + if (!file) { + alert("Please upload a JPEG file first."); + return; + } + + const reader = new FileReader(); + reader.onload = function(event) { + const imgData = event.target.result; + const pdf = new jsPDF({ + orientation: 'p', + unit: 'mm', + format: 'a4' + }); + + // Calculate the PDF width and height to maintain the image aspect ratio + const imgProps = pdf.getImageProperties(imgData); + const pdfWidth = pdf.internal.pageSize.getWidth(); + const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; + pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight); + const pdfBlob = pdf.output('blob'); + + // Create a download link for the PDF + const pdfUrl = URL.createObjectURL(pdfBlob); + downloadLink.href = pdfUrl; + downloadLink.download = "converted.pdf"; + downloadLink.innerHTML = "Download PDF"; + downloadLink.style.display = "block"; + }; + reader.readAsDataURL(file); + }); +}); \ No newline at end of file diff --git a/image-to-pdf-app/style.css b/image-to-pdf-app/style.css new file mode 100644 index 0000000..25c3c0b --- /dev/null +++ b/image-to-pdf-app/style.css @@ -0,0 +1,75 @@ + +body, html { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + +header { + background-color: #f8f9fa; + padding: 20px 0; + text-align: center; + border-bottom: 1px solid #e0e0e0; +} + +header h1 { + margin: 0; + color: #333; +} + +main { + padding: 20px; + text-align: center; +} + +button, #convert-btn, #convert-button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + margin: 10px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +button:hover, #convert-btn:hover, #convert-button:hover { + background-color: #0056b3; +} + +input[type="file"] { + margin: 20px 0; +} + +.conversion-section { + margin-top: 20px; +} + +footer { + background-color: #f8f9fa; + text-align: center; + padding: 10px 0; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + border-top: 1px solid #e0e0e0; +} + +footer p { + margin: 0; + color: #777; +} + +/* Responsive layout adjustments */ +@media (max-width: 768px) { + header, main, footer { + padding-left: 10px; + padding-right: 10px; + } + + button, #convert-btn, #convert-button { + width: 100%; + box-sizing: border-box; /* Ensures padding does not add to the total width */ + } +} \ No newline at end of file