Make html2canvas downloadable filename after input-CodePudding

I have a div in which I use html2canvas to download to a PNG file of that div. However, in my current code the name of the file will be static and not change until I change the code manually.

Is it possible to have it so that the name of the file will be determined by an input field?

So if you look at the input field in the example below. I would like for it that the filename which is currently staning as: "download.png" will be determined on what you write inside the input field.

I don't know if this is even possible, but would like to try to get it to work.

    $( ".download" ).on( "click", function() {
      html2canvas(document.querySelector("#to_save")).then(canvas => {
        canvas.toBlob(function(blob) {
          window.saveAs(blob, 'download.png');
        });
        });
    });

<input id="name" type="text" placeholder="Type here...">

CodePudding user response：

Yes you can get the value of that input field with jquery. If your input field has the id "name" then its value would be accessible like that:

$("#name").val();

Your code would look like this:

$(".download").on("click", function () {
  html2canvas(document.querySelector("#to_save")).then((canvas) => {
    canvas.toBlob(function (blob) {
      window.saveAs(blob, $("#name").val());
    });
  });
});