-1

I am trying to find out how I can go about saving an image displayed on my react web app, by clicking "save" button and having my image saved by:

  1. To downloads folder on my laptop OR
  2. Have windows explorer pop up and I determine filename and where I want to save the image

Screenshot of my app: enter image description here

missjcohen
  • 59
  • 1
  • 2
  • 5

2 Answers2

1

You need to create a blob of that image and then create an anchor tag and trigger a download response which contains the url of that blob.

See this. Download image in ReactJS

John Michael Manlupig
  • 139
  • 1
  • 8
1

npm install --save image-downloader

A Node module for downloading the image to disk from a given URL

Example:-

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))
Raj Navadiya
  • 21
  • 2