How To Create Image To PDF Convertor Tool In Blogger?

Convert images to PDF instantly with this easy-to-use tool! Responsive, fast, and user-friendly design made for seamless conversion on any device

Hello everyone, today we will learn to create an image to pdf convertor tool in blogger using html, css, javascript. By using this tool users can convert multiple images into pdf within seconds.

Image To PDF Convertor Tool Script For Blogger

How To Create Image To PDF Converter Tool In Blogger?

As a content creator or blogger, offering interactive tools like an Image to PDF Converter can significantly enhance your website’s value. This tool is particularly useful for those dealing with documents, presentations, and other media formats. In this detailed guide, you’ll learn how to create a user-friendly Image to PDF Converter Tool using HTML, CSS, and JavaScript, and seamlessly integrate it into your Blogger website.

Benefits of Adding Image to PDF Converter on Blogger.

Adding an Image to PDF Converter on your blog can significantly enhance user experience by allowing visitors to convert images into PDFs without having to leave your site. This feature not only elevates convenience for users but also contributes positively to your blog’s SEO by boosting user engagement and dwell time. Let’s explore how you can create and implement this tool step-by-step.

In today’s fast-paced world, people value efficiency. Providing your audience with an easy-to-use tool that converts images to PDFs directly from your blog offers them a quick solution and positions your platform as more resourceful and engaging. This not only helps your visitors but also adds practical value to your content, making your blog a go-to destination.

Features Of This PDF Convertor Tool.

This Image to PDF Converter tool is simple yet powerful. It lets users easily upload images and quickly convert them into PDFs with a single click. The tool includes smart buttons that change automatically, offering a smooth user experience. It works perfectly on all devices, with a clean and modern design. A progress bar keeps users informed during the conversion process, while the PDF file is named after the original image for convenience. Best of all, it’s fully self-contained, needing no external support, making it ideal for Blogger sites.

How I Made This Image To PDF Convertor Tool?

I created this Image to PDF Converter tool using a simple combination of HTML, CSS, and JavaScript. First, I set up the structure with HTML to include the file upload option and buttons. Then, I styled it with CSS, focusing on a clean and responsive design that looks good on all devices. Finally, I used JavaScript to handle the core function—converting the uploaded image into a PDF file. The script also manages button changes, shows a progress message, and provides a download option once the conversion is done. The result is an easy-to-use tool that works smoothly and looks professional.

Steps To Create This Tool In Blogger.

• Step 1 : First of all double tap to copy the below given code.

<!--[ Image To PDF Converter HTML ]-->
     <div class='container'>
        <h1>Image to PDF Converter</h1>
        <input type="file" id="imageUpload" multiple accept="image/*">
        <button type="button" id="convertButton" onclick="convertToPDF()">Convert to PDF</button>
        <div id="processingMessage">Processing... Please wait.</div>
        <div id="progressContainer">
            <div id="progressBar">
                <div id="progressText">0%</div>
            </div>
        </div>
        <button type="button" id="downloadButton" onclick="downloadPDF()">Download PDF</button>
        <button type="button" id="clearButton" onclick="clearInputs()">Reset</button>
    </div>
<!--[ Image To PDF Converter CSS ]-->
<style>
.container {width: 100%;max-width: 600px;background: #fff;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);text-align: center;margin: 0 auto;margin-top: 50px;}
#imageUpload {padding: 12px;border: 2px solid #007BFF;border-radius: 5px;width: 100%;font-size: 16px;margin-bottom: 20px;}
button {display: inline-block;padding: 12px 20px;background-color: #007BFF;color: #fff;border: none;border-radius: 5px;font-size: 16px;cursor: pointer;margin-top: 10px;transition: background-color 0.3s ease;width: 100%;box-sizing: border-box;}
button:hover {background-color: #0056b3;}
#downloadButton, #clearButton {display: none;}
#processingMessage {display: none;font-size: 18px;color: #007BFF;margin-top: 20px;}
#progressContainer {display: none;width: 100%;margin-top: 20px;border: 2px solid #007BFF;border-radius: 5px;box-sizing: border-box;}
#progressBar {height: 50px;background-color: #007BFF;border-radius: 3px;width: 0%;transition: width 0.5s ease;position: relative;}
#progressText {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;font-size: 18px;font-weight: bold;text-align: center;}
</style>
<!--[ Image To PDF Converter JS ]-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script>
        let generatedPDF;
        let fileName;

        async function convertToPDF() {
            const { jsPDF } = window.jspdf;
            const imgFiles = document.getElementById('imageUpload').files;

            if (imgFiles.length === 0) {
                alert('Please select at least one image.');
                return;
            }

            // Reset state and UI
            document.getElementById('convertButton').style.display = 'none'; // Hide convert button
            document.getElementById('processingMessage').style.display = 'block'; // Show processing message
            document.getElementById('progressContainer').style.display = 'block'; // Show progress bar
            document.getElementById('downloadButton').style.display = 'none';  // Hide download button
            document.getElementById('clearButton').style.display = 'none';  // Hide clear button
            updateProgressBar(0); // Reset progress bar to 0%
            const pdf = new jsPDF();
            fileName = generateRandomFileName(); // Generate random file name

            let progress = 0;
            const totalSteps = imgFiles.length;

            for (let i = 0; i < imgFiles.length; i++) {
                const imgDataUrl = await getImageDataURL(imgFiles[i]);
                const img = new Image();
                img.src = imgDataUrl;

                await new Promise(resolve => img.onload = resolve);

                const imgWidth = pdf.internal.pageSize.width - 30;  // Adjust for padding
                const imgHeight = img.height * imgWidth / img.width;

                pdf.addImage(imgDataUrl, 'JPEG', 15, 15, imgWidth, imgHeight);

                if (i < imgFiles.length - 1) {
                    pdf.addPage();
                }

                // Simulate processing time
                await new Promise(resolve => setTimeout(resolve, 500)); // Adjust this delay to simulate processing time

                // Update progress bar
                progress = Math.round(((i + 1) / totalSteps) * 100);
                updateProgressBar(progress);
            }

            generatedPDF = pdf;  // Store the generated PDF
            document.getElementById('processingMessage').style.display = 'none'; // Hide processing message
            document.getElementById('progressContainer').style.display = 'none'; // Hide progress bar container
            document.getElementById('downloadButton').style.display = 'block';  // Show download button
            document.getElementById('clearButton').style.display = 'block';  // Show clear button
        }

        function getImageDataURL(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = (e) => resolve(e.target.result);
                reader.onerror = reject;
                reader.readAsDataURL(file);
            });
        }

        function updateProgressBar(percentage) {
            document.getElementById('progressBar').style.width = `${percentage}%`;
            document.getElementById('progressText').innerText = `${percentage}%`;
        }

        function generateRandomFileName() {
            const randomString = Math.random().toString(36).substring(2, 12); // Generate random string
            return `apf_${randomString}`;
        }

        function downloadPDF() {
            if (generatedPDF) {
                const pdfBlob = generatedPDF.output('blob'); // Create a Blob from the PDF
                const url = URL.createObjectURL(pdfBlob); // Create a URL for the Blob

                const a = document.createElement('a');
                a.href = url;
                a.download = `${fileName}.pdf`; // Use the fileName variable for naming the PDF
                a.click();

                URL.revokeObjectURL(url); // Clean up the object URL
            }
        }

        function clearInputs() {
            document.getElementById('imageUpload').value = '';
            document.getElementById('convertButton').style.display = 'block';
            document.getElementById('downloadButton').style.display = 'none';
            document.getElementById('clearButton').style.display = 'none';
            document.getElementById('processingMessage').style.display = 'none'; // Hide processing message
            document.getElementById('progressContainer').style.display = 'none'; // Hide progress bar
            document.getElementById('progressBar').style.width = '0%'; // Reset progress bar
            document.getElementById('progressText').innerText = '0%'; // Reset progress text
            document.getElementById('progressBar').style.backgroundColor = '#007BFF'; // Reset the background color of progress bar
            document.getElementById('progressContainer').style.border = '2px solid #007BFF'; // Reset the border color of progress container
            generatedPDF = null; // Clear the generated PDF
        }
    </script>

• Step 2 : Now go to Blogger dashboard.
• Step 3 : Click on menu and create a new page or post.
• Step 4 : Now switch to html view and paste the copied code.
• Step 5 : Name the post/page and save.

Congrats! you have created the image to pdf convertor tool in your blogger website, now open the tool and check is it working or not, if there is any issue contact me here ASAP I'll try to resolve your issue as soon as possible. you can also join our telegram and contact there for faster solution.

Can I Customize The Tool?

Yes,you can. It's fully customizable code with no encryption and no credit. If you found this helpful you can help us by mentioning our website or post link in your any of the post or social media's groups.

Related Posts

Conclusion : In this post, I have shared about making image to pdf convertor tool in blogger. We hope you enjoyed reading our post and found it helpful. If you have any other question or need any help just comment below I will reply as soon as possible.

Can I convert multiple images into a single PDF using this tool?

Yes, you can but that will we merged in one pdf in different pages. So always select the files you wanted in same pdf, for different you can generate one by one.

Does the tool support transparent images like PNG with no background?

Yes, the tool can convert transparent PNG images to PDF while preserving the transparent areas.

Can I adjust the image size or orientation before converting to PDF?

No, this version directly converts the image as-is. Future updates may include resizing and orientation options.

Does the tool work offline once it's embedded in Blogger?

No, the tool requires an internet connection since it's hosted online through your Blogger site.

Is there a file size limit for images I can convert?

While the tool handles most standard image sizes, extremely large images might face performance issues during conversion.