{"id":28393,"date":"2022-03-24T19:56:24","date_gmt":"2022-03-24T19:56:24","guid":{"rendered":"http:\/\/convert-images-to-pdf"},"modified":"2025-03-02T15:07:28","modified_gmt":"2025-03-02T23:07:28","slug":"convert-images-to-pdf","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/convert-images-to-pdf\/","title":{"rendered":"Convert Images to PDF"},"content":{"rendered":"

PDF (portable document format) incorporates several technologies, including encryption, data compression, font management, computer graphics, and so on. All of this is designed to describe the contents of read-only documents and make them reliable for sharing among communicating parties while preserving layout and formatting to ensure consistency regardless of the viewing device or underlying software architecture.<\/p>\n

The wide adoption and the open-source nature of the PDF standard led to the creation of so many programs (most of which are free) to read or write to PDF files. The most common is the web browser or applications like Adobe Acrobat that fulfill this need. Most PDF writers require us to interact using a GUI to create PDF files<\/a>. While this is fantastic for many use cases, it can become rather tiresome when we want to repeatedly generate PDF receipts for end-users or carry out some task of that sort. Several tools have been developed to create PDF files programmatically to fulfill this need.<\/p>\n

In this article, we will use PDF-LIB<\/a> in a simple React<\/a> application to create a PDF file, embed an image in it, and finally download the resulting PDF file.<\/p>\n

Here is a link<\/a> to the demo on CodeSandbox.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Project Setup<\/h2>\n

Let\u2019s start by creating a new React application using CRA<\/a>.<\/p>\n

    npx create-react-app image-to-pdf\n<\/code><\/span><\/pre>\n
Once that\u2019s done installing, we can install the dependency we\u2019ll need for our application.<\/p>\n
    npm install pdf-lib \n<\/code><\/span><\/pre>\n
The pdf-lib module will provide us with the APIs to create PDF files.<\/p>\n
Building the UI<\/h2>\n
Replace the content of your App.js<\/code> file to match the following:<\/p>\n
    import<\/span> '.\/App.css'<\/span>;\n    import<\/span> { useState } from<\/span> 'react'<\/span>;\n    import<\/span> { PDFDocument } from<\/span> 'pdf-lib'<\/span>;\n    function<\/span> App<\/span>(<\/span>) <\/span>{\n      const<\/span> [file, setFile] = useState(null<\/span>);\n      const<\/span> fileToArrBuffer = (file<\/span>) =><\/span>\n        new<\/span> Promise<\/span>((res, rej<\/span>) =><\/span> {\n          const<\/span> fileReader = new<\/span> FileReader();\n          fileReader.onload = ()<\/span> =><\/span> res(fileReader.result);\n          fileReader.onerror = ()<\/span> =><\/span> rej(fileReader.error);\n          fileReader.readAsArrayBuffer(file);\n        });\n      const<\/span> downloadFile = async<\/span> (blob) => {\n        const<\/span> URL = window<\/span>.URL.createObjectURL(blob);\n        const<\/span> el = document<\/span>.createElement('a'<\/span>);\n        el.download = 'mydummyfile.pdf'<\/span>;\n        el.href = URL;\n        el.click();\n        window<\/span>.URL.revokeObjectURL(URL);\n      };\n      const<\/span> embedImageInPdfAndDownload = async<\/span> () => {};\n      return<\/span> (\n        <><\/span>\n          <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n            <label<\/span> htmlFor<\/span>=\"file\"<\/span> className<\/span>=\"btn-grey\"<\/span>><\/span>\n              {' '}\n              select image\n            <\/label<\/span>><\/span>\n            <input<\/span>\n              id<\/span>=\"file\"<\/span>\n              type<\/span>=\"file\"<\/span>\n              onChange<\/span>={(e)<\/span> =><\/span> setFile(e.target.files[0])}\n              multiple={false}\n              accept=\"image\/*\"\n              name=\"file\"\n            \/>\n            {file && (\n              <section<\/span>><\/span>\n                <img<\/span> src<\/span>={URL.createObjectURL(file)}<\/span> alt<\/span>=\"some_image\"<\/span> width<\/span>={300}<\/span> \/><\/span>\n                <span<\/span>><\/span> {file.name}<\/span<\/span>><\/span>\n              <\/section<\/span>><\/span>\n            )}\n            {file && (\n              <><\/span>\n                <button<\/span> className<\/span>=\"btn-green\"<\/span> onClick<\/span>={embedImageInPdfAndDownload}<\/span>><\/span>\n                  {'embed image in PDF and download'}\n                <\/button<\/span>><\/span>\n              <\/><\/span>\n            )}\n          <\/div<\/span>><\/span>\n        <\/><\/span><\/span>\n      );\n    }\n    export<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the body of our App<\/code> component, we start by creating a state variable to hold and set the contents of our image file. Next, we define three functions, from top to bottom; the first two functions expect a Blob as a parameter. The first function, fileToArrBuffer<\/code> uses the FileReader()<\/code> module to read and return an Arraybuffer<\/code> representing the chunk of bytes in the Blob(file).<\/p>\n
The second function, downloadFile<\/code> as the name implies, creates a pointer to a Blob in memory and binds it to an anchor tag, after which it specifies the download attribute, which would signify the name of the downloaded file. In our case, we just called the file dummyfile.pdf<\/code> because this function expects the Blob to be a PDF file. The anchor tag is then clicked programmatically to download the file, after which the pointer is deleted by the call to revokeObjectURL<\/code> to avoid memory leak.<\/p>\n
The third function is responsible for creating the contents of the PDF file, including the image that will be embedded in it. The body of this function is intentionally left blank. In the sections that follow, we will incrementally update its contents and explain each step as we go.<\/p>\n
Our App<\/code> component returns some basic JSX, such as an input field and its associated label to allow the user to select a file, an img<\/code> element to render the selected image on the screen, and a button to trigger our yet to be defined embedImageInPdfAndDownload<\/code> function.<\/p>\n
Add the following to your App.css<\/code> file:<\/p>\n
    * {\n      box-sizing<\/span>: border-box;\n      font-family<\/span>: monospace;\n    }\n    .App<\/span> {\n      text-align<\/span>: center;\n      display<\/span>: grid;\n      gap<\/span>: 2rem<\/span>;\n      max-width<\/span>: 470px<\/span>;\n      padding<\/span>: 1.5rem<\/span>;\n      margin<\/span>: auto;\n      margin-top<\/span>: 4rem<\/span>;\n    }\n    label<\/span>,\n    button<\/span> {\n      font-size<\/span>: 1.4rem<\/span>;\n      color<\/span>: #fff<\/span>;\n      padding<\/span>: 0.5em<\/span> 0.9em<\/span>;\n      cursor<\/span>: pointer;\n      border<\/span>: none;\n    }\n    [type='file'<\/span>]<\/span> {\n      display<\/span>: none;\n    }\n    [class*='btn'<\/span>]<\/span> {\n      border-radius<\/span>: 5px<\/span>;\n      text-transform<\/span>: capitalize;\n    }\n    .btn-grey<\/span> {\n      background-color<\/span>: #f2f2f2<\/span>;\n      color<\/span>: #333<\/span>;\n      border<\/span>: 1px<\/span> solid #888<\/span>;\n    }\n    .btn-green<\/span> {\n      background-color<\/span>: #63dd47<\/span>;\n    }\n    .btn-blue<\/span> {\n      background-color<\/span>: #0e80c9<\/span>;\n    }\n    p<\/span> {\n      display<\/span>: block;\n      width<\/span>: 60%<\/span>;\n      font-family<\/span>: monospace;\n      font-size<\/span>: 1.2rem<\/span>;\n      background-color<\/span>: #000<\/span>;\n      color<\/span>: #f00<\/span>;\n      margin<\/span>: auto;\n      text-overflow<\/span>: ellipsis;\n    }\n    code<\/span> {\n      display<\/span>: grid;\n      gap<\/span>: 4px<\/span>;\n      padding<\/span>: 1rem<\/span>;\n      background-color<\/span>: #000<\/span>;\n    }\n    section<\/span> {\n      text-align<\/span>: center;\n      display<\/span>: grid;\n      justify-items<\/span>: center;\n      gap<\/span>: 1.4rem<\/span>;\n    }\n    section<\/span> span<\/span> {\n      font-size<\/span>: 1.8rem<\/span>;\n    }\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Create the Pdf File and Embed the Image<\/h2>\n
In the current version of our app, we can only select an image, but we are yet to create the PDF file. Over the next steps, we will be updating the contents of the embedImageInPdfAndDownload<\/code> function to achieve this.<\/p>\n
First, let\u2019s use the PDFDocument<\/code> class to create an instance of a pdf file.<\/p>\n
    const<\/span> pdfDoc = await<\/span> PDFDocument.create();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Since we want to display the selected image in the PDF file, we need to store it as a resource in the PDF.<\/p>\n
    const<\/span> buffer = await<\/span> fileToArrBuffer(file);\n    console<\/span>.log({ buffer });\n    let<\/span> image;\n    if<\/span> (\/jpe?g\/i<\/span>.test(file.type)) image = await<\/span> pdfDoc.embedJpg(buffer);\n    else<\/span> if<\/span> (\/png\/i<\/span>.test(file.type)) image = await<\/span> pdfDoc.embedPng(buffer);\n    else<\/span> throw<\/span> Error<\/span>('please choose a JPEG or PNG file to proceed'<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First, we convert our image to an array buffer by calling the fileToArrBuffer<\/code> function we defined earlier. Next, we define a variable called image<\/code> which will be used to hold information about the embedded image. The pdf-kit module only allows embedding JPEG<\/code> or PNG<\/code> files using the embedJPEG<\/code> and embedPNG<\/code> methods. So based on the image file type, we call the appropriate method, each of which returns an object stored in the image<\/code> variable. The returned object contains information ( width, height, reference id, etc. ) about the image and some helper functions that will be used to manipulate the image.<\/p>\n
\n
The embedJPEG<\/code> and embedPNG<\/code> functions also accept the image data contents as either base64, an array buffer, or a unit8Array.<\/p>\n<\/blockquote>\n
Having an image stored as a resource in a PDF file doesn\u2019t mean the image will be displayed when we view the PDF file. We need to create a page, reference our image as a resource for that page, and then paint it to the screen.<\/p>\n
    const<\/span> page = pdfDoc.addPage();\n    page.drawImage(image, {\n      width<\/span>: image.scale(0.5<\/span>).width,\n      height<\/span>: image.scale(0.5<\/span>).height,\n      x<\/span>: 100<\/span>,\n      y<\/span>: 100<\/span>,\n    });\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We first create a page then draw the image on the page using the drawImage()<\/code> method, where we specify two parameters: the image we want to draw and an object that defines the image options.<\/p>\n
We specified the width<\/code> and height<\/code> of the image to 50% of its original size to maintain its aspect ratio. We also specified the coordinates of the image, 100 points on both the x and y-axis. It is also important to note that in the PDF coordinate system, the bottom left part of a PDF page is the Origin, i.e., the 0,0<\/code> point, which means that the measurements will be taken from that point.<\/p>\n
Finally, we will need to download the resulting PDF file created.<\/p>\n
    let<\/span> b64Chunk = await<\/span> pdfDoc.saveAsBase64();\n    b64Chunk = 'data:application\/pdf;base64,'<\/span> + b64Chunk;\n    const<\/span> blob = await<\/span> (await<\/span> fetch(b64Chunk)).blob();\n    downloadFile(blob);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The pdf-kit module provides several options for getting the data representing the PDF file. In this case, we chose the base64<\/code> option, and we are retrieving the resulting data by calling the saveAsBase64<\/code> function. Remember that the downloadFile<\/code> function we defined earlier expects a blob as its parameter to perform the download. To that end, we convert the base64<\/code> encoded string to a Data URI and then use the fetch<\/code> API to convert this data to a blob, which is then fed to the downloadFile<\/code> function to save the resulting PDF locally.<\/p>\n
To view the running application, run this command in your terminal:<\/p>\n
    npm start\n<\/code><\/span><\/pre>\n
We should be able to embed an image in a PDF file and download the resulting PDF file.<\/p>\n
\"\"<\/p>\n
You can find the complete project here<\/a> on GitHub.<\/p>\n
Conclusion<\/h1>\n
PDF has become the world\u2019s leading page description language for documents, and it can be used for different purposes. This guide describes a simple use case showing how to create a PDF file and embed an image in it.<\/p>\n
Resources you may find helpful:<\/strong><\/p>\n