HTML Botão em HMTL que imprime apenas uma imagem .jpg

DaniloBrito · 2 de novembro de 2024

Olá. Pesquisei na internet um modo que faz com que um botão em HTML imprima apenas uma imagem jpg.

O problema que estou enfrentando é que quando crio o botão ele imprime a página inteira, e eu preciso que imprima apenas a imagem em si.

DiF · 2 de novembro de 2024

@DaniloBrito Você não consegue fazer isso só com html. É necessário pelo menos o Javcascript para isso...

exemplo:

 function imprimir(url) {
  var janela = window.open('');
  janela.document.write('<img src="' + url + '" onload="window.print();window.close()" />');
  janela.focus();
}

Html

<img src="img/imagem.jpg" />
<button onclick="imprimir('imagem.jpg')">Imprimir</button>

Este é o modo simples... Mas se vocÊ quer adaptar 100% o tamanho da imagem para caber em uma folha A4 por exemplo

Deve fazer algo deste tipo:

function imprimir(url) {
  var janela = window.open('');
  janela.document.write(`
    <html>
      <head>
        <style>
          /* Define estilos para ajustar a imagem ao tamanho A4 */
          @media print {
            img {
              width: 100%;
              height: auto;
              max-width: 210mm;
              max-height: 297mm;
              margin: 0;
              padding: 0;
            }
            body, html {
              margin: 0;
              padding: 0;
            }
          }
        </style>
      </head>
      <body>
        <img src="${url}" onload="window.print(); window.close()" />
      </body>
    </html>
  `);
  janela.focus();

Basicamentem, você define um CSS e cria os elementos de uma nova página HTML, contendo apenas a imagem.

DaniloBrito · 3 de novembro de 2024

Olá, fiz um código em javascript que ao clicar numa imagem ela imprime automaticamente. No entanto, a imagem fica pequena e eu preciso que ocupe o tamanho de uma folha A4.

Segue o código.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
 
<title>Planeta Dinossauro</title>
  
 
</head>
<body>

 <!-- A imagem que será clicada para impressão -->
    <center>
    <h2>Clique na Imagem para Imprimir</h2>
    </center>
    <center>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6HSTNpRT6GXjlW2l-V4MCCOof4rgHfYRKc_rnBFRwHo4NsxDV-beN9iug4bbYaMRHmmOu-y0WYGO8BO6LKwTG2AiA3ML-iFNvhhrQQRVb0rpkHIczeGkXerdbUObat2GaYpXa4rrXBMBvLGgNsE3JXdToNxlAKYHZTvZlHsoVVx0ajOy-71OLO69C1PE/s16000/1.jpg" alt="Imagem para impressão" id="imagem1" style="cursor: pointer; width: 500px;"><br/>
    <center>
    <h2>Clique na Imagem para Imprimir</h2>
    </center>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbv54BUeYlqTa1CMpqbqDWc06Q2_xKbLfnfiGanR2L46NFMSyoR5rzcxgBd47xilENRBgQ0qUipP9NQY_09tea5EC-GNsKU79GFl219nWSMzoZMSjh3PTMJUz03PwViu2F6Dt6j722gjXCYGznYOTx9F8rL8yg87Toem34E2Yf_N3ooXuLeZEyz7C1F1M/s16000/2.jpg" alt="Imagem para impressão" id="imagem2" style="cursor: pointer; width: 500px;"><br/>
    <center>
   

    <script>
        // Seleciona a imagem pelo ID e adiciona um evento de clique
        document.getElementById("imagem1").addEventListener("click", function() {
            // Abre uma nova janela ou aba
            const janelaImpressao = window.open("", "_blank");
            
            // Adiciona a imagem na nova janela para ser impressa
            janelaImpressao.document.write(`
                <html>
                    <head>
                        <title>Impressão de Imagem</title>
                    </head>
                    <body onload="window.print(); window.close();">
                        <img src="${this.src}" style="width: 100%;">
                    </body>
                </html>
            `);

            // Finaliza o documento para que o conteúdo seja carregado
            janelaImpressao.document.close();
        });
    </script>

    <script>
        // Seleciona a imagem pelo ID e adiciona um evento de clique
        document.getElementById("imagem2").addEventListener("click", function() {
            // Abre uma nova janela ou aba
            const janelaImpressao = window.open("", "_blank");
            
            // Adiciona a imagem na nova janela para ser impressa
            janelaImpressao.document.write(`
                <html>
                    <head>
                        <title>Impressão de Imagem</title>
                    </head>
                    <body onload="window.print(); window.close();">
                        <img src="${this.src}" style="width: 100%;">
                    </body>
                </html>
            `);

            // Finaliza o documento para que o conteúdo seja carregado
            janelaImpressao.document.close();
        });
    </script>

</body>
</html>