Create a button to download external images

• Using HTML5 you can use the " download " attribute

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

What you can do is with PHP first 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');

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 in the following way:

<?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.

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 only by means of a line in an html you call it

  <a href="descarga.php?archivo=direccion.extension" class="btn btn-buynow">Descargar</a>

For me, the download attribute did not work since, being an image, my browser sent the display by default.

In the end I managed it with the following function in 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)
}

Thanks to Sapan Bodiwala, as I got the example from his page. https://dev.to/sbodi10/download-images-using-javascript-51a9

Depending on how the other server is configured this may not work, since hotlinking, or whatever this technique is called, is banned on some machines, although it shouldn't be a problem if you can configure it.