transferência da ligação de imagem href ao carregar

eu gero ligações normais como: <a href="/path/to/image"><img src="/path/to/image" /></a> numa aplicação web.

Quando eu clicar no link, Ele mostra a imagem em uma nova página. Se quiser gravar a imagem, então terá de carregar com o botão direito nela e seleccionar "gravar como"

Eu não quero este comportamento, eu gostaria de ter uma caixa de download saindo quando eu clicar no link, isso é possível apenas com html ou javascript? Como?

Se não fosse, teria de fazer um download.script php e chamá - lo para o href com o nome do ficheiro como parâmetro...?

Author: bstpierre, 2010-03-09

10 answers

<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

Ainda não É totalmente suportada http://caniuse.com/#feat=download, mas você pode usar com o modernizr https://modernizr.com/download/?adownload-setclasses (em Non-core detecta), para verificar o suporte do navegador.

 198
Author: Francisco Tomé Costa, 2016-06-02 13:14:26

A maneira mais fácil de criar a ligação de download para imagem ou html é configurar o atributo de download, mas esta solução funciona apenas nos navegadores modernos.

<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>

"myimage" é um nome de ficheiro a descarregar. A extensão será adicionada automaticamente Exemplo aqui

 50
Author: Aleksey Saatchi, 2013-01-28 17:20:01
<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

Telecarregamento.php:

<?php

$file = $_GET['file'];

download_file($file);

function download_file( $fullPath ){

  // Must be fresh start
  if( headers_sent() )
    die('Headers Sent');

  // Required for some browsers
  if(ini_get('zlib.output_compression'))
    ini_set('zlib.output_compression', 'Off');

  // File Exists?
  if( file_exists($fullPath) ){

    // Parse Info / Get Extension
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);

    // Determine Content Type
    switch ($ext) {
      case "pdf": $ctype="application/pdf"; break;
      case "exe": $ctype="application/octet-stream"; break;
      case "zip": $ctype="application/zip"; break;
      case "doc": $ctype="application/msword"; break;
      case "xls": $ctype="application/vnd.ms-excel"; break;
      case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
      case "gif": $ctype="image/gif"; break;
      case "png": $ctype="image/png"; break;
      case "jpeg":
      case "jpg": $ctype="image/jpg"; break;
      default: $ctype="application/force-download";
    }

    header("Pragma: public"); // required
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Cache-Control: private",false); // required for certain browsers
    header("Content-Type: $ctype");
    header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".$fsize);
    ob_clean();
    flush();
    readfile( $fullPath );

  } else
    die('File Not Found');

}
?>
 45
Author: amir, 2011-08-30 12:41:20

Não, Não É. irá precisar de alguma coisa no servidor para enviar um cabeçalho de disposição de conteúdo para definir o ficheiro como um anexo em vez de estar em linha. Você poderia fazer isso com uma configuração Apache simples.

Eu encontrei um exemplo de fazê-lo usando mod_ reescrever, embora eu saiba que há uma maneira mais simples.

 10
Author: Quentin, 2010-03-09 10:15:27
Experimenta isto...
<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
 6
Author: edCoder, 2015-07-31 11:19:20

Se estiver a usar o HTML5, pode adicionar o atributo 'baixar' às suas ligações.

<a href="/test.pdf" download>

Http://www.w3schools.com/tags/att_a_download.asp

 5
Author: Jijo Paulose, 2016-01-20 11:42:24

Não o podes fazer com html/javascript puro. Isto porque você tem uma conexão separada com o servidor web para obter um arquivo separado (a imagem) e um servidor web normal irá servir o arquivo com cabeçalhos de conteúdo definidos de modo que o navegador que ler o tipo de conteúdo irá decidir que o tipo pode ser tratado internamente.

A forma de forçar o navegador a não lidar com o ficheiro internamente é Alterar os cabeçalhos (conteúdo-disposição prefereably, ou tipo de conteúdo) de modo que o navegador irá não tentar lidar com o arquivo internamente. Você pode fazer isso escrevendo um script no servidor web que define dinamicamente os cabeçalhos (ou seja, baixar.php) ou configurando o servidor web para devolver cabeçalhos diferentes para o ficheiro que deseja transferir. Você pode fazer isso em uma base por diretório no servidor web, o que lhe permitiria sair sem escrever qualquer php ou javascript - simplesmente ter todas as suas imagens de download nesse único local.

 3
Author: Colin Pickard, 2011-10-03 13:42:02

Código simples para a transferência de imagens com um click de imagem usando o php

<html>
<head>
    <title> Download-Button </title>
</head>
<body>
    <p> Click the image ! You can download! </p>
    <?php
    $image =  basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically 
    //echo $image;
    ?>
    <a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
        <img alt="logo" src="http://localhost/sc/img/logo.png">
    </a>
</body>

 3
Author: Sashtha Manik, 2016-06-02 13:08:03

Obter a imagem com o botão da imagem!

Fiz este código simples!:)
<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>
 1
Author: Sashtha Manik, 2016-06-02 10:51:28

Existem duas formas simples de evitar abrir QUALQUER ficheiro em vez de descarregar. 1.) Uma solução simples, que é à prova de bala, é mudar o nome de extensão da imagem para algo que um navegador não entende, como myimage.zzz No entanto, você precisa dizer ao seu visitante para alterar a extensão após o download. Talvez não tão prático. 2.) Coloque a imagem em um zip, eu geralmente faço isso com arquivos que eu não quero ter aberto imediatamente.

As marcas de download não funcionam para o safari ou explicador. Espero que isso ajude.

 -3
Author: Rudolf B, 2015-06-25 15:40:58