Image ↔ PDF Converter
/* General Styles */
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #333;
}
.container {
text-align: center;
max-width: 800px;
margin: 20px;
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #444;
}
.converter {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
width: 300px;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
}
h2 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #555;
}
input[type="file"] {
margin-bottom: 15px;
width: 100%;
padding: 10px;
border: 2px dashed #ccc;
border-radius: 10px;
background: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
button {
padding: 10px 20px;
border: none;
border-radius: 10px;
background: #007bff;
color: white;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #0056b3;
}
#output {
margin-top: 20px;
}
/* Responsive Design */
@media (max-width: 600px) {
.converter {
flex-direction: column;
}
.card {
width: 100%;
}
h1 {
font-size: 2rem;
}
}
// Image to PDF Conversion
document.getElementById('convertToPdf').addEventListener('click', async () => {
const imageInput = document.getElementById('imageInput');
if (imageInput.files.length === 0) {
alert('Please select at least one image.');
return;
}
const { PDFDocument } = PDFLib;
const pdfDoc = await PDFDocument.create();
for (const file of imageInput.files) {
const img = await createImageBitmap(file);
const page = pdfDoc.addPage([img.width, img.height]);
const imageBytes = await file.arrayBuffer();
const pdfImage = await pdfDoc.embedPng(imageBytes);
page.drawImage(pdfImage, {
x: 0,
y: 0,
width: img.width,
height: img.height,
});
}
const pdfBytes = await pdfDoc.save();
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'converted.pdf';
link.click();
});
// PDF to Image Conversion
document.getElementById('convertToImage').addEventListener('click', async () => {
const pdfInput = document.getElementById('pdfInput');
if (pdfInput.files.length === 0) {
alert('Please select a PDF file.');
return;
}
const file = pdfInput.files[0];
const fileReader = new FileReader();
fileReader.onload = async function () {
const typedarray = new Uint8Array(this.result);
const pdf = await pdfjsLib.getDocument(typedarray).promise;
const output = document.getElementById('output');
output.innerHTML = '';
for (let i = 1; i <= pdf.numPages; i++) {
const page = await pdf.getPage(i);
const viewport = page.getViewport({ scale: 1.5 });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
await page.render({ canvasContext: context, viewport }).promise;
const img = document.createElement('img');
img.src = canvas.toDataURL('image/png');
output.appendChild(img);
}
};
fileReader.readAsArrayBuffer(file);
});
