CODEWITHSUNDEEP
javascript
jizzer
jizzer

Reputation: 11

Download html2canvas image to specific file path

export default class Thumbnail {
getThumbnail(canvas) {
    html2canvas(canvas)
    .then((canvas) => {
        this.saveAs(canvas, 'thumbnail.png');
    }).catch(function(err) {
        console.log(err);
    })
}

saveAs(canvas, filename) {
    let link = document.createElement('a');
    if (typeof link.download === 'string') {
        link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        link.download = filename;

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    } else {
        window.open(canvas);
    } 
  }
}

I have created a module Thumbnail taking canvas tag as its parameter to take a screen capture of the designated area when called from the html script tag (so whenever I refresh the local page, it calls the module)

As far as I know, the html2canvas saves the image to the download folder as its default. If I would like to save an image to a specific file path what should I do?

For example, if I would like to save the image into a folder with a file path of ./Desktop/Project/Assets/Thumbnail, is there any way to add such command inside the code?

Upvotes: 1

Views: 795

Answers (1)

Tom
Tom

Reputation: 9127

No web browser will permit this.

You as the page author have zero control over where the file is saved. This is as much for security and privacy as it is about user preferences.

This applies to all downloads, not just files created by the html2canvas package.

If you're building a tool that only you will use (and it sounds like you are), you may be able to accomplish the same result by writing a non-web shell script that monitors your Downloads directory and moves these files to the special location when they appear.

For that to work, you'd want to give all the screenshots names that follow a pattern you can easily recognize with your shell script.

Upvotes: 2

Related Questions