19

Quiero saber si hay alguna forma de hacer un botón que permita descargar imágenes que están guardadas en otro servidor desde una URL. Es decir, como hacer click derecho - guardar imagen como pero con un botón. Busqué soluciones con PHP o JavaScript pero aún no he encontrado nada.

El atributo download de HTML5 no funciona en todos los navegadores. ¿Existe alguna alternativa con JavaScript?.

6 respuestas 6

25
+50
  • Usando HTML5 podes usar el atributo "download"

    <a href="http://static.hogarmania.com/archivos/201204/estrenimiento-gato-bebe2-xl-668x400x80xX.jpg" download="cute.jpg">
      <img src="http://static.hogarmania.com/archivos/201204/estrenimiento-gato-bebe2-xl-668x400x80xX.jpg" width="250" />
    </a>
    

Demo: https://jsfiddle.net/Socramg/1o9oec7r/

  • Usando JS (y jQuery)

    $('a[download]').each(function() {
      var $a = $(this),
          fileUrl = $a.attr('href');
    
      $a.attr('href', 'data:application/octet-stream,' + encodeURIComponent(fileUrl));
    });
    

Demo: https://jsfiddle.net/Socramg/1o9oec7r/1/

2
  • 1
    Lamentablemente este atributo no es soportado por todos los navegadores caniuse.com/#feat=download Commented el 13 oct. 2016 a las 10:56
  • Funciona con Chrome y Edge pero no funciona la descarga de imágenes con firefox el resto de archivos funciona correctamente.
    – Edwin V
    Commented el 13 oct. 2016 a las 21:31
5

Lo que puedes hacer es con PHP primero es copiar la imagen al servidor y después descargarla, por ejemplo:

$rutaImagenExterna = 'http://static.hogarmania.com/archivos/201204/estrenimiento-gato-bebe2-xl-668x400x80xX.jpg';
$rutaImagenLocal = 'mis_imagenes/cat.jpg';

// Opción 1 necesitas habilitar allow_url_fopen & PHP5+
copy($rutaImagenExterna, $rutaImagenLocal);

// Opción 2
$content = file_get_contents($rutaImagen);
$fp = fopen($rutaImagenLocal, 'w');
fwrite($fp, $content);
fclose($fp);

ahora para descargarla es puedes usar este código

header('Content-disposition: attachment; filename='.$rutaImagenLocal);
header('Content-type: image/jpeg');
readfile('cat.jpg');
1
  • Para evitar que tu servidor se llene de imagenes, despues de readfile('cat.jpg') se puede agregar unlink($rutaImagenLocal) y con esto la eliminara. Esto no significa que se pueda eliminar la carpeta mis_imagenes de $rutaImagenLocal, esta carpeta siempre debe existir para poder copiar la imagen desde la url pero si eliminara la imagen que el usuario descargo. Commented el 20 ago. 2019 a las 6:54
1

Puedes hacerlo con JavaScript de forma programática de esta forma:

var ruta = 'http://jmri.org/images/ico-java.png';

var enlace = document.createElement('a');

enlace.href = ruta;

enlace.download = ruta;

document.body.appendChild(enlace);

enlace.click();

//Borrrar el elemento
enlace.parentNode.removeChild(enlace);

También puedes descargar usando PHP de la siguiente forma:

<?php

$ruta= "http://jmri.org/images/ico-java.png"; 

header("Content-Description: File Transfer"); 
header("Content-Type: application/octet-stream"); 
header("Content-Disposition: attachment; filename='" . basename($ruta) . "'"); 

readfile ($ruta); 

?>


Saludos.
0

Este es un ejemplo son dos archivos el PHP y HTML

Descarga.php

<?php
    if (!isset($_GET['archivo']) || empty($_GET['archivo'])) {
       exit();
    }

    $archivo = basename($_GET['archivo']);

    $ruta = 'archivos/'.$archivo;

    if (is_file($ruta))
    {
       header('Content-Type: application/force-download');
       header('Content-Disposition: attachment; filename='.$archivo);
       header('Content-Transfer-Encoding: binary');
       header('Content-Length: '.filesize($ruta));

       readfile($ruta);
    }
    else
       exit();
    ?>

y solo mediante una linea en un html lo llamas

  <a href="descarga.php?archivo=direccion.extension" class="btn btn-buynow">Descargar</a>
1
  • Ya probé con esto pero no funciona ya que las imágenes están en un servidor externo
    – Edwin V
    Commented el 13 oct. 2016 a las 22:59
0

Para mi el atributo download no funcionó ya que al ser imagen, mi navegador mandaba por default a la visualización.

Al final lo logré con la siguiente función en javascript.

async function downloadImage(imageSrc) {
  const image = await fetch(imageSrc)
  const imageBlog = await image.blob()
  const imageURL = URL.createObjectURL(imageBlog)

  const link = document.createElement('a')
  link.href = imageURL
  link.download = 'image file name here'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

Agradezco a Sapan Bodiwala, ya que el ejemplo lo obtuvé de su página. https://dev.to/sbodi10/download-images-using-javascript-51a9

-1

Depende de cómo esté configurado el otro servidor esto puede no funcionar, ya que el hotlinking, o como se llama esta técnica está vetada en algunas máquinas, aunque no debería ser problema si pudieses configurarlo.

3
  • 3
    Hola @Carles. ¡Bienvendo a Stack Overflow en español y gracias por contribuir! Quizás te interese realizar el recorrido de bienvenida... Más allá de las complejidades que pueda encontrar, ¿cuál sería la respuesta a la pregunta? Te comento que en el sitio se fomentan respuestas que estén lo más completas posibles. Te puede interesar leer Cómo responder.
    – Mariano
    Commented el 13 oct. 2016 a las 11:03
  • Hola, no sé a qué viene esto. Hace muchos años que estoy en la plataforma, aunque ya hace tiempo que no respondo. Tengo casi 15 años de experiencia en programación web y la respuesta que he dado es, bajo mi punto de vista de vital importancia. De hecho esta persona está comentado que ha probado muchas técnicas y que no le funcionan, por tanto puede que el problema no sea el método sino la configuración del servidor remoto, que es justo lo que yo le estoy sugiriendo.
    – Carles
    Commented el 17 oct. 2016 a las 6:21
  • Justamente como se nota que es una buena respuesta, me parecía buena idea que elabores con más detalle lo que estabas diciendo (por lo menos para futuros lectores, ya que el autor aceptó otra respuesta). Creo que "está vetada en algunas máquinas" podría especificar de qué se trata, o al menos comentar algunos casos.
    – Mariano
    Commented el 17 oct. 2016 a las 7:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.