qual a melhor forma para adicionar mais botões para selecionar outras fotos e ao gerar o PDF aparecer também no PDF? o código abaixo funciona somente para um botão
Gerar Imagem Base64Gerar PDF da imagem enviada no formulário
<!-- Criar o campo para usuario selecionar a imagem -->
<h1>teste<input type="file" id="imagem-usuario" onclick="converterImagem()" />
<!-- Receber e apresentar a imagem para o usuario apos converte para Base64 -->
<div id="apresentar-imagem"></div>
<h1><button type="button" onclick="converterImagem()">Gerar PDF</button></h1>
<!-- Incluir a biblioteca para gerar PDF-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
crossorigin="anonymous"></script>
<!-- Incluir a biblioteca para gerar PDF-->
<script>
// Funcao converter imagem para base64
function converterImagem() {
// Receber o arquivo do formulario
var receberArquivo = document.getElementById("imagem-usuario").files;
//console.log(receberArquivo);
// Verificar se existe o arquivo
if (receberArquivo.length > 0) {
// Carregar a imagem
var carregarImagem = receberArquivo[0];
//console.log(carregarImagem);
// FileReader - permite ler o conteudo do arquivo do computador do usuario
var lerArquivo = new FileReader();
// O evento onload ocorre quando um objeto he carregado
lerArquivo.onload = function (arquivoCarregado) {
// Converter a imagem para base64
var imagemBase64 = arquivoCarregado.target.result;
//console.log(imagemBase64);
//**** INICIO ENVIAR IMAGEM PARA O HTML *****/
// Cria o elemento HTML
var novaImagem = document.createElement('img');
// Atribuir a imagem para o atributo src
novaImagem.src = imagemBase64;
//**** FIM ENVIAR IMAGEM PARA O HTML *****/
// Enviar imagem para o HTML
document.getElementById("apresentar-imagem").innerHTML = novaImagem.outerHTML;
// Recuperar a imagem base64 do HTML
//console.log(document.getElementById("apresentar-imagem").innerHTML);
//**** INICIO GERAR PDF *****/
// Instanciar o jsPDF
var doc = new jsPDF();
// Texto que deve estar no PDF
doc.text('Celke - Gerar PDF com JavaScript!', 15, 15);
// Imagem que deve estar no PDF
doc.addImage(imagemBase64, 15, 25, 50, 50);
// Gerar PDF
doc.save('celke.pdf');
//**** FIM GERAR PDF *****/
}
// O metodo readAsDataURL e usado para ler o conteudo
lerArquivo.readAsDataURL(carregarImagem);
}
}
</script>