Create a button to download external images

I want to know if there is any way to make a button that allows downloading images that are saved on another server from a URL. That is, like right click-Save image as but with a button. I searched for solutions with PHP or JavaScript but haven't found anything yet.

The download attribute of HTML5 does not work in all browsers. Is there any alternative with JavaScript?.

 19
Author: Phi, 2016-10-11
Source

5 answers

  • Using HTML5 you can use the attribute " 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 /

  • Using JS (and 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 /

 21
Author: Marcos, 2016-10-14 14:30:19

What You can do is with PHP first is copy the image to the server and then download it, for example: 

$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);

Now to download it is you can use this code 

header('Content-disposition: attachment; filename='.$rutaImagenLocal);
header('Content-type: image/jpeg');
readfile('cat.jpg');
 6
Author: Robin Gomez, 2016-10-14 01:10:11

This is an example are two files the PHP and HTML

Download.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();
    ?>

And just by a line in an html you call it 

  <a href="descarga.php?archivo=direccion.extension" class="btn btn-buynow">Descargar</a>
 1
Author: Rastalovely, 2016-10-14 01:41:43

Depends on how the other server is configured this may not work, since hotlinking, or as it is called this technique is banned on some machines, although it should not be a problem if you could configure it.

 0
Author: Carles, 2016-10-13 10:30:20

You can do it with JavaScript programmatically like this: 

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);

You can also download using PHP as follows: 

<?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
Author: VipPunkJoshers Droopy, 2016-10-14 00:05:38