<div id="pdf-converter-container">
<h3 class="Title">JPG/PNG to PDF Converter</h3>
<div id="drop-area">
<p class="drag_drop">Drag & drop images here or click to browse</p>
<input type="file" id="image-input" accept="image/jpeg, image/png" multiple>
</div>
<div id="preview"></div>
<button id="convert-btn" disabled>Convert to PDF</button>
<a id="download-link" style="display: none;" download="converted.pdf">Download PDF</a>
</div>
<style>
.drag_drop{
color: black;
}
.Title{
color: black;
}
#pdf-converter-container {
font-family: 'Segoe UI', sans-serif;
max-width: 600px;
margin: 30px auto;
padding: 20px;
border-radius: 15px;
background: #fdfdfd;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}
#drop-area {
border: 2px dashed #aaa;
padding: 30px;
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
margin-bottom: 20px;
}
#drop-area.hover {
background-color: #e8f0fe;
}
#image-input {
display: none;
}
#preview {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
#preview img {
max-height: 100px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#convert-btn {
padding: 10px 25px;
background-color: #28a745;
color: rgb(0, 0, 0);
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
}
#convert-btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}
#download-link {
display: inline-block;
margin-top: 15px;
background: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
}
@media (max-width: 600px) {
#preview {
flex-direction: column;
align-items: center;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const dropArea = document.getElementById('drop-area');
const fileInput = document.getElementById('image-input');
const preview = document.getElementById('preview');
const convertBtn = document.getElementById('convert-btn');
const downloadLink = document.getElementById('download-link');
let filesArray = [];
dropArea.addEventListener('click', () => fileInput.click());
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, e => {
e.preventDefault();
dropArea.classList.add('hover');
});
});
['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, e => {
e.preventDefault();
dropArea.classList.remove('hover');
});
});
dropArea.addEventListener('drop', e => {
const dtFiles = Array.from(e.dataTransfer.files);
handleFiles(dtFiles);
});
fileInput.addEventListener('change', () => {
handleFiles(Array.from(fileInput.files));
});
function handleFiles(files) {
files = files.filter(f => f.type.startsWith('image/'));
if (!files.length) return;
filesArray = filesArray.concat(files);
updatePreview();
convertBtn.disabled = false;
}
function updatePreview() {
preview.innerHTML = '';
filesArray.forEach(file => {
const reader = new FileReader();
reader.onload = e => {
const img = document.createElement('img');
img.src = e.target.result;
preview.appendChild(img);
};
reader.readAsDataURL(file);
});
}
convertBtn.addEventListener('click', async () => {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF();
for (let i = 0; i < filesArray.length; i++) {
const file = filesArray[i];
const imgData = await readImageAsDataURL(file);
const img = new Image();
img.src = imgData;
await new Promise(resolve => {
img.onload = () => {
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (img.height * pdfWidth) / img.width;
if (i !== 0) pdf.addPage();
pdf.addImage(img, 'JPEG', 0, 0, pdfWidth, pdfHeight);
resolve();
};
});
}
const blob = pdf.output('blob');
const url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.style.display = 'inline-block';
});
function readImageAsDataURL(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = e => resolve(e.target.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
});
</script>