Skip to main content

How to Add JPG to PDF Converter Tool in Blogger Website

Add JPG to PDF Converter Tool in Blogger Website


  • 1.) Go to www.blogger.com.
  • 2.) Login using your Gmail Account.
  • 3.) After login, the Blogger Dashboard will open
  • 4.) Click and Select The Blog where you want to add the code
  • 5.) From the left menu, click on Layout and go to layout 
  • 6.) Click +Add a Gadget where you want to show the widget (Sidebar / Footer / Header)
  • 7.) From the gadget list, click HTML/JavaScript

Enter a Title (optional)
Copy the HTML/JavaScript code provided below and paste it into the Content Box.
  • 8.) Click Save.
  • 9.) Click Save Arrangement.
  • 10.)  Click View Blog and Check Your Blog.
  • 11.) Your HTML / JavaScript widget is Now Live.


JPG to PDF Converter Tool HTML Javascript Code 



<!doctype html>

<style>
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
  font-family: 'Segoe UI', sans-serif;
}

.converter-box {
  background: #fff;
  padding: 25px 20px;
  width: 300px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

h2 {
  font-size: 20px;
  color: #ff5722;
  margin-bottom: 15px;
}

input[type=file] {
  width: 100%;
  margin-bottom: 15px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}

button {
  background: #ff5722;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}

button:hover {
  background: #e64a19;
}
</style>

<div class="converter-box">
  <h2>📄PDF To JPG Converter</h2>
  <input type="file" id="pdfInput" accept="application/pdf" />
  <button onclick="convertPDFtoJPG()">Convert</button>
</div>

<!-- PDF.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

<script>
pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";

function convertPDFtoJPG() {
  const file = document.getElementById("pdfInput").files[0];

  if (!file) {
    alert("Please select a PDF file!");
    return;
  }

  const reader = new FileReader();
  reader.onload = function () {
    const typedarray = new Uint8Array(this.result);

    pdfjsLib.getDocument(typedarray).promise.then(pdf => {
      for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
        pdf.getPage(pageNum).then(page => {
          const viewport = page.getViewport({ scale: 2 });
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");

          canvas.width = viewport.width;
          canvas.height = viewport.height;

          page.render({
            canvasContext: ctx,
            viewport: viewport
          }).promise.then(() => {
            const imgData = canvas.toDataURL("image/jpeg", 1.0);

            const link = document.createElement("a");
            link.href = imgData;
            link.download = `page-${pageNum}.jpg`;
            link.click();
          });
        });
      }

      // ✅ Download message
      setTimeout(() => {
        alert("🎉 JPG images have been successfully downloaded!");
      }, 800);
    });
  };

  reader.readAsArrayBuffer(file);
}
</script>

</!doctype>

Comments

Post a Comment