Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on December 18, 2022

 

 

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

 

 

JavaScript
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.

 

 

JavaScript
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

 

 

 

Recent Posts

  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme