index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jsPDF Webcam Image to PDF Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script></head> <body> <h1>Webcam Image to PDF</h1> <video id="video" width="640" height="480" autoplay></video> <canvas id="canvas" width="640" height="480"></canvas> <button id="capture">Capture Image</button> <button id="generate">Generate PDF</button> </body> <script> // get video element const video = document.getElementById('video') const canvas = document.getElementById('canvas') const context = canvas.getContext('2d') const captureButton = document.getElementById('capture') const doc = new jsPDF() // as we load the page we need to access to user webcam navigator.mediaDevices.getUserMedia({video:true}) .then((stream) => { video.srcObject = stream }) // capture the image captureButton.addEventListener('click',() => { context.drawImage(video,0,0,canvas.width,canvas.height) }) const generateButton = document.getElementById('generate') generateButton.addEventListener('click',() => { // encode this image to base64 code const base64URL = canvas.toDataURL('image/jpeg') const imgWidth = doc.internal.pageSize.getWidth() const imgHeight = doc.internal.pageSize.getHeight() // add the image in the pdf doc.addImage(base64URL,'JPEG',0,0,imgWidth,imgHeight) // save the pdf document doc.save("output.pdf") }) </script> </html> |
