Home / Questions / 27143
Accepted
Edwin V
Asked: 2020-10-12 12:59:32 +0800 CST 2020-10-12 12:59:32 +0800 CST

Создайте кнопку для загрузки внешних изображений

  • 772

Я хочу знать, есть ли способ сделать кнопку, позволяющую загружать изображения, сохраненные на другом сервере, с URL-адреса. То есть как правый клик - сохранить изображение как но с кнопкой. Я искал решения с PHP или JavaScript, но пока ничего не нашел.

Атрибут HTML5 downloadработает не во всех браузерах. Есть ли альтернатива с JavaScript?

javascript

6 Answers

  1. Best Answer

    • Используя HTML5 , вы можете использовать атрибут « скачать »

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

    Демо: https://jsfiddle.net/Socramg/1o9oec7r/

    • Использование JS (и jQuery )

      $('a[download]').each(function() {
  var $a = $(this),
      fileUrl = $a.attr('href');

  $a.attr('href', 'data:application/octet-stream,' + encodeURIComponent(fileUrl));
});

    Демо: https://jsfiddle.net/Socramg/1o9oec7r/1/

    • 24

  2. Что вы можете сделать, так это с помощью PHP сначала скопировать изображение на сервер, а затем загрузить его, например:

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

    теперь, чтобы скачать его, вы можете использовать этот код

    header('Content-disposition: attachment; filename='.$rutaImagenLocal);
header('Content-type: image/jpeg');
readfile('cat.jpg');
    • 5

  3. Вы можете сделать это с помощью JavaScript программно следующим образом:

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

    Вы также можете загрузить с помощью PHP следующим образом:

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

  4. Это пример двух файлов PHP и HTML

    Скачать.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();
    ?>

    и только с помощью строчки в html вызываешь

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

  5. Для меня атрибут загрузки не работал, поскольку, будучи изображением, мой браузер по умолчанию отправлял отображение.

    В конце концов мне удалось это с помощью следующей функции в 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)
}

    Спасибо Sapan Bodiwala, так как я получил пример с его страницы. https://dev.to/sbodi10/download-images-using-javascript-51a9

    • 0

  6. В зависимости от того, как сконфигурирован другой сервер, это может не сработать, так как хотлинкинг, или как там называется этот метод, запрещен на некоторых машинах, хотя это не должно быть проблемой, если вы можете его настроить.

    • -1