在保存对话框中使用image.jpg而不是true.html

Question

I don't know how to add image in my snippet code but hope the question will bi clear anyway.

Want to save ie download imgb on disk.

Save As dialog appears but:

• default name and format is true.html - I want it to be image.jpg or similar.

• there is no any existing image in the list so I can't click and replace it with the new one.

• if I write image.jpg inside Save As dialog the final result is not an image but a black rectangle.

Any help?

 $('button').on('click', function(){ let dl = document.createElement("a"); dl.href = document.getElementById('imgb'); dl.download = true; document.body.appendChild(dl); dl.click(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class='imgb' id='imgb' src='img.jpg' alt='img'> <br><br> <button>CLICK</button> 

Answer 1

I think this will work:

 $('button').on('click', function(){
      let dl = document.createElement("a");
      dl.href = document.getElementById('imgb').getAttribute("src");
      dl.download = true;
      document.body.appendChild(dl);
      dl.click();
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

html:

    <img id='imgb' src='img.jpg' alt='img'>
    <br><br>
    <button>CLICK</button>

Your element hat the class of imgb and not id, and you can access the href by using getAtribute