I am making a business card generator.
I've made a basic form that restricts the text on an img64 background.
So far so good.
But I would like the person to be able to add a profile picture on the card.
So I made a button for the user to upload their own photo, but I can't add it to the pdf.
So my goal is to be able to superimpose an image over the background of the business card.
If anyone can help me?
Here is my code:
//UPLOAD IMAGE PROFILE
var imageFile = document.getElementById("imageFile")
var canvas = document.getElementById("canvas")
var button = document.getElementById('button')
var ctx = canvas.getContext('2d')
imageFile.addEventListener("change", handleImage, false)
function handleImage(e) {
console.log(e)
var reader = new FileReader()
reader.onload = function(event){
var image = new Image()
image.onload = function(){
canvas.width = image.width
canvas.height = image.height
ctx.drawImage(image,0,0)
}
image.src = event.target.result
}
reader.readAsDataURL(e.target.files[0])
}
//jsPDF
$('#button').click(function() {
var doc = new jsPDF('l', 'in', [88,58]);
var imgData = 'data:image/jpeg;base64,/9j/4AAQ........
doc.addImage(imgData, 'JPEG',0,0,88,58);
var nom = $('#nom').val();
var tel = $('#tel').val();
var email = $('#email').val();
var rsac = $('#rsac').val();
doc.setFontSize(200);
doc.setTextColor(126, 127, 127);
doc.text(6, 25, nom);
doc.text(6, 29, tel);
doc.text(6, 33, email);
doc.text(65, 40, rsac);
doc.save('test.pdf');
});
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" integrity="sha512-s/XK4vYVXTGeUSv4bRPOuxSDmDlTedEpMEcAQk0t/FMd9V6ft8iXdwSBxV0eD60c6w/tjotSlKu9J2AAW1ckTA==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="navbar"><h1>Générateur de carte de visite</h1></div>
<div id="wrapper">
<input type="text" id="nom" value=""/ placeholder="Nom Prenom"><br>
<input type="text" id="tel" value="" placeholder="Telephone" /><br>
<input type="text" id="email" value="" placeholder="E-mail" /><br>
<input type="text" id="rsac" value="" placeholder="N°RSAC"/><br>
<label for="imagefile">Choose a profile picture:</label><br>
<input type="file" id="imageFile"><br>
<canvas id="canvas"></canvas>
<button id="button"> Telecharger pdf</button>
</body>
</html>
question from:
https://stackoverflow.com/questions/65842340/add-a-second-image-on-an-img64-background-jspdf 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
