JS批量下载图片

这篇具有很好参考价值的文章主要介绍了JS批量下载图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JS批量下载图片或文件(V2,已详细解说)

目标

例如,你在网上,看到某个网页可以下载很多图片资源,但是没有批量下载怎么办?于是,幻想有这么个函数 downloadImages(imageURLs) 批量下载。咋整?

方案

解决下载问题

一般情况下,用 <a> 标签可以实现文件的下载功能。一般下载是这样的代码:

<a href="/path/to/receipt.pdf" download>下载</a>

如此,点击下载,即可显示下载,此时文件名跟原名一样receipt.pdf

download 属性配置目标文件(就是 href 属性指定的文件 )将被执行下载操作。

download 的可配置一个值,作为下载后的文件名。如果文件名没有限制,那么浏览器将自动检测当前文件的扩展名并添加到文件上 (.img, .pdf, .txt, .html, 等等)

如果没有配置一个值,原始文件名将被用上。

下边这种情况指定文件名。

<a href="/path/to/receipt.pdf" download="收据">下载</a>

如此,点击下载,即可显示下载并且文件名为收据.pdf

解决下载图片时总是预览的问题

你可能已经意识到,上边的的这个方式对图片无法达到真正的下载,而是单纯的预览。应该怎么做呢?

我们可以通过将图片的二进制信息以Blob对象的方式存储,将其转换为URL对象,再让 <a> 来下载它。

  1. fetch(imgUrl).then(res => blob()) 来获取图片二进制信息
  2. URL.createObjectURL(blob) 来创建图片的 URL 对象
  3. document.createElement("a") 来创建下载链接对象
  4. <a href="{url}" download> 来重新指向需要下载的图片资源
  5. 点击下载即可
  6. 清理创建的对象即可(URL、下载链接)
function downloadImage(filename, url) {
  fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
      // create URL and Link
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);

      // Invoke download
      a.click();

      // remove URL and Link
      window.URL.revokeObjectURL(url);
      a.remove();
    })
    .catch((err) => console.error(err.message));
}

// 已下载的文件名为"new-filename.jpg"
downloadImage('new-filename', 'path/or/url/to/your/image.jpg')

注意下载图片的时候,最好是在图片URL相同的域名之下,否则很多图片是禁止跨域访问的。

解决批量问题

这里不是批量下载如何写循环的问题,而是

  1. 因为程序太快然而下载太慢所导致的一系列问题

我们就简化处理,一秒钟让它发送一个下载图片的请求。

for (let i=0; i<urls.length; i++) {
  setTimeout(() => {
    // codes for downloading an image
  }, i*1000)
}

总结代码

“Talk is cheap, show you the code”:

function downloadImage(filename, url) {
  fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
      // create URL and Link
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);

      // Invoke download
      a.click();

      // remove URL and Link
      window.URL.revokeObjectURL(url);
      a.remove();
    })
    .catch((err) => console.error(err.message));
}

function downloadImages(urls) {
  for (let i = 0; i < urls.length; i++) {
    setTimeout(() => {
      // codes for downloading an image
      downloadImage(`${Date.now()}`, urls[i]);
    }, i * 1000);
  }
}

// download two images for example
downloadImages(["/path/to/image1.jpg", "/path/to/image2.png"]);

搞定,收功。

创作不易,请多珍惜。文章来源地址https://www.toymoban.com/news/detail-475151.html

到了这里,关于JS批量下载图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 - 超详细 “纯前端“ 将阿里云 OSS 存储文件删除教程,支持单个 / 批量删除各种图片图像、文档、音视频文件、压缩包等文件(附完整示例运行源码,保证新手小白 100% 轻松实现删除功能)

    如果您需要纯前端将文件上传到阿里云 OSS,请访问:这篇文章。 本文站在新手的角度, 在 vue3 项目开发中,超详细 “纯前端(无需后端)” 删除阿里云oss文件,支持单个删除或批量删除oss存储上的各种图片图像、文档、音视频文件、压缩包等文件, 你可以直接复制示例源

    2024年01月18日
    浏览(54)
  • Selenium批量自动化获取并下载图片

    Selenium批量自动化获取并下载图片 在现代的Web开发中,自动化测试和数据抓取已经成为不可或缺的一部分。Selenium作为一款强大的自动化测试工具,不仅可以用于测试Web应用,还可以用于批量获取网页上的图片。本文将介绍如何使用Selenium批量自动化获取并下载图片。 一、准

    2024年01月22日
    浏览(42)
  • Python爬虫系列(二)——Python爬虫批量下载百度图片

    1. 前言 先贴代码 如果要使用上述程序的话,需要修改两个地方 : self.directory 这是本地存储地址,修改为自己电脑的地址,另外,**{}**不要删 spider.json_count = 10 这是下载的图像组数,一组有30张图像,10组就是三百张,根据需求下载 也可以去gitee仓库直接下载程序。 关于 py

    2023年04月08日
    浏览(52)
  • Python实现批量图片下载及去重处理

    在爬虫应用开发中,常常需要批量下载图片,并对图片进行去重处理。Python 是一种非常流行的编程语言,也是开发爬虫应用的首选,本文将介绍如何使用 Python 下载图片,并对下载的图片进行去重处理。 首先,我们需要使用 Python 中的 Requests 库来下载图片,并使用 OS 库来创

    2023年04月17日
    浏览(42)
  • Java批量下载书籍图片并保存为PDF的方法

    因为经常出差火车上没网、不方便电子书阅读器批注,需要从某网站上批量下载多本书籍的图片并自动打包成PDF文件。 1、尝试获得图片地址,发现F12被禁 解决方法:使用Chrome浏览器,点击右上角三个点呼出菜单,选择“更多工具”-“开发者工具” 或者使用Ctrl+Shift+C、Ctrl

    2024年02月13日
    浏览(40)
  • Python爬虫实战(六)——使用代理IP批量下载高清小姐姐图片(附上完整源码)

    本次爬取的目标是某网站4K高清小姐姐图片: 实现批量下载指定的图片,存放到指定文件夹中: Python:3.10 编辑器:PyCharm 第三方模块,自行安装: 爬虫使用代理IP的好处有以下几点: 轮换IP地址 :使用代理IP可以轮换IP地址,降低被封禁的风险,从而保持爬取的连续性

    2024年02月07日
    浏览(101)
  • Python批量导入图片到Word文件

    问题背景:2017年4月应华章公司邀请,翻译一本来自美国的Python入门教材,全书共750页,2018年4月完成翻译交稿,2018年9月责任编辑寄来样稿进行印刷前校对。经过半个月的检查和校对,又进行了一些小的修改和完善。为避免辛苦修改后的样稿被寄丢,也为了节省邮寄路上的时

    2023年04月16日
    浏览(78)
  • 文件夹的批量下载

            公司想实现文件系统下载,上次图简单就草率的写了文件下载,这不趁着同事请假赶集吧这坑给填上。                   刚准备开始写,就头疼,文件只要获得数据输出流就行,但是这文件夹需要维护层级关系。         前端给的是服务器的绝对地址,还得服务

    2024年02月11日
    浏览(44)
  • 【批量区域识别内容重命名】批量识别图片区域文字并重命名,批量图片部分识别内容重命文件,PDF区域识别提取重命名

    我们在工作和生活中经常遇到这样的需求:比如将以下的图片区域识别进行重命名,批量识别后改成以时间和工作内容重命名,便于日后检索,快速查询 首先我们拍摄照片用到的是水印相机,这里的文字呢我们需要加个背景,这样在文字识别就很容易的被识别,准确率也非常

    2024年04月25日
    浏览(49)
  • 通俗易懂【Springboot】 单文件下载和批量下载(多个文件合成一个压缩包下载)

    1.简单理解文件下载 文件下载,是从服务器下载到本地电脑。 文件下载的原理,首先通过IO流将服务器的文件读取到内存里(只有将数据读到内存,电脑才可以操作数据),读取后文件数据存放在内存中,将内存中的数据通过网络发送给本地客户端的浏览器。本地客户端的浏

    2024年02月08日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包