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