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
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
1 2 3 4 |
<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> |
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
1 2 3 4 5 6 7 8 9 |
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.
1 2 3 4 5 6 7 8 9 |
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