-4

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 Base64

Gerar 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>

    

1 Resposta 1

-1

Você pode usar o atributo multiple no input de ficheiro para selecionar várias imagens. Depois basta correr um ciclo para carregar as imagens no evento onchange e adicioná-las a um array. Ao gerar o PDF basta ir buscar as imagens a esse array.

<h1>Selecionar<input type="file" id="imagem-usuario" multiple onchange="converterImagens()" />

<div id="apresentar-imagem"></div>


<h1><button type="button" onclick="gerarPDF()">Gerar PDF</button></h1>   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
    integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
    crossorigin="anonymous"></script>

<script>

    var imagens = [];

    function gerarPDF() {
        var doc = new jsPDF();

        doc.text('Celke - Gerar PDF com JavaScript!', 15, 15);

        for (var i in imagens) {
            var x = 15;
            var y = 30 + (i * 50);
            var w = 50;
            var h = 50;
            doc.addImage(imagens[i], x, y, w, h);
        }

        doc.save('celke.pdf');
    }

    function converterImagens() {
        var receberArquivo = document.getElementById("imagem-usuario").files;
        if (receberArquivo.length > 0) {

            for (var i in receberArquivo) {
                var carregarImagem = receberArquivo[i];
                if (typeof carregarImagem === "object") {
                    console.log(carregarImagem);
                    var lerArquivo = new FileReader();

                    lerArquivo.onload = function (arquivoCarregado) {
                        var imagemBase64 = arquivoCarregado.target.result;
                        imagens.push(imagemBase64);

                        var novaImagem = document.createElement('img');

                        novaImagem.src = imagemBase64;

                        document.getElementById("apresentar-imagem").innerHTML += novaImagem.outerHTML;
                    }

                    lerArquivo.readAsDataURL(carregarImagem);
                }
            }
        }
    }
</script>
1
  • muito obrigado pela ajuda
    – Ronaldo
    Commented 25/04/2023 às 23:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .