jsPDF Tutorial to Add Image Captured by Webcam Using Base64 URL in PDF Document Using Javascript

Welcome folks today in this blog post we will be adding the image which is captured by webcam using base64 url in pdf document using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>

1	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>

As you can see we have included the jspdf cdn library in the html Now we need to add the DOM elements where we will be displaying the webcam live video and showing the webcam captured image

<button id="start-camera">Start Camera</button>
<video id="video" width="320" height="240" autoplay></video>
<button id="click-photo">Capture Photo and Save PDF</button>
<canvas id="canvas" width="320" height="240"></canvas>

<button id="start-camera">Start Camera</button>

<button id="click-photo">Capture Photo and Save PDF</button>

As you can see we are having the buttons to start the webcam and also we have the video element where we will be showing the live webcam video of the user. And then we have the button to capture webcam and save the pdf document. And we have also the canvas where we will be displaying the webcam captured image.

Now we need to write the javascript code to actually allow the permission of webcam and display the live webcam video of the user as shown below

let camera_button = document.querySelector("#start-camera");
    let video = document.querySelector("#video");
    let click_button = document.querySelector("#click-photo");
    let canvas = document.querySelector("#canvas");

    camera_button.addEventListener('click', async function () {
        let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
        video.srcObject = stream;
    });

let camera_button = document.querySelector("#start-camera");

let video = document.querySelector("#video");

let click_button = document.querySelector("#click-photo");

let canvas = document.querySelector("#canvas");

camera_button.addEventListener('click', async function () {

let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });

video.srcObject = stream;

});

As you can see we are getting all the references of all the DOM Elements by using their id in the html. And then we are adding the click event handler to the start camera button. And inside this function we are using the navigator mediadevices and we are using the getUserMedia() method to display the webcam live video of the user. And then we are attaching to the video element.

And after that you need to capture the image from the webcam whenever you hit the capture image button and also at the same time insert the image inside the pdf document using the base64 code.

click_button.addEventListener('click', function () {
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        let image_data_url = canvas.toDataURL('image/jpeg');
        let doc = new jsPDF()
        doc.addImage(image_data_url, 0, 0)
        doc.save("output.pdf")
        // data url of the image
        console.log(image_data_url);
    });

click_button.addEventListener('click', function () {

canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

let image_data_url = canvas.toDataURL('image/jpeg');

let doc = new jsPDF()

doc.addImage(image_data_url, 0, 0)

doc.save("output.pdf")

// data url of the image

console.log(image_data_url);

});

As you can see we are using the canvas drawImage() method to capture the image from the webcam and it takes the x,y coordinates and the width,height of the image and then we are converting the canvas image to base64 string url by using the toDataURL() method and using this base64 code we are adding the image inside the pdf document by using the jspdf library. And it contains the method of addImage() to add the base64 image and after that we are saving the pdf using custom name as shown below