project: certificate generator
I have a certificate template.png file in the folder directory.
Link for the template file: https://drive.google.com/file/d/1UgYkO-VOXvCUjBkdbSEDOGVd8szZXZ0z/view?usp=sharing
Here I am looking to get a new pdf file using the above template file along with the name inserted if I click the generate button.
I should use pdf-lib for creating the pdf file.
I need to do these following things:
- Fetch the certificate from file system
- load the document using the
PDFDocumentobject - load the font by fetching from file system
- Embed the font resource in the pdf object
- insert the test from the input box at the empty area where the name goes (with x,y and font-size)
- save the file
- create a new file object in JavaSScript and download it using the
saveAs(fileName)
Frontend Pic:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Certificate Generator</title>
<link href="styles.css" rel="stylesheet" />
<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.js"></script>
<script type="module" src="FileSaver.js"></script>
</head>
<body>
<section>
<div class="container">
<img
src="https://codedamn.com/assets/images/red-logo.png"
width="75"
alt="codedamn logo"
/>
<p>Get your certificate of</p>
<h1>Project Certificate Generator</h1>
<p class="name-text">Enter Your Name</p>
<input type="text" id="participant-name" placeholder="Steve" />
<button id="proceed">Generate Certificate</button>
</div>
</section>
</body>
<!-- <script src="index.js"></script> -->
</html>