将图像从React Web应用程序保存到我的笔记本电脑

问题描述

我试图通过单击“保存”按钮并通过以下方式保存我的图像来查找如何保存显示在我的React Web应用程序上的图像：

1. 要在笔记本电脑上下载文件夹 或
2. 弹出Windows资源管理器，确定文件名以及保存图像的位置

我的应用的屏幕截图：

解决方法

您需要创建该图片的Blob，然后创建锚标记并触发包含该Blob网址的下载响应。

看到这个。 Download image in ReactJS

,

npm install-保存图像下载器

用于从给定URL将图像下载到磁盘的Node模块

示例：-

const download = require('image-downloader')
 
options = {
  url: 'http://someurl.com/image2.jpg',dest: '/path/to/dest/photo.jpg'      // will be saved to /path/to/dest/photo.jpg
}
 
download.image(options)
  .then(({ filename }) => {
    console.log('Saved to',filename)  // saved to /path/to/dest/photo.jpg
  })
  .catch((err) => console.error(err))