how to make an auto download image in javascript by setTimeout?

Question

<a id="download" href="link of your file">click here to download the file</a>.

<script>
    var downloadTimeout = setTimeout (
        function() {
            window.location = document.getElementById('download').href;
        }, 4000);
</script>

This is not what I want, I need the image will be automatically downloaded when the time is stop by setTimeout but I can't get it. Please help me. Thank you

how? can you give me some idea to create a automatically download the image in canvas? — joven diojoy, Aug 15 '16 at 06:51
http://stackoverflow.com/questions/156686/how-to-start-automatic-download-of-a-file-in-internet-explorer refer this link it might helpful — Shakir Ahamed, Aug 15 '16 at 06:53
Thanks for the link. but this is not what i meant sir. I need the canvas to download as image when the time is up using setTimeout(). — joven diojoy, Aug 15 '16 at 06:56
that was a sample sir. I'm just getting an idea in that script. — joven diojoy, Aug 15 '16 at 07:10
Possible duplicate of [Download image with JavaScript](http://stackoverflow.com/questions/17311645/download-image-with-javascript) — Nihar Sarkar, Aug 15 '16 at 07:13

score 1 · Accepted Answer · 2016-08-15T09:04:20.047

1

You can do it using HTML5. To download image, add download property to your link. Note that this doesn't work in some browsers. You can try it on JSFiddle.

<a href = "yourImage.png" download = "customName.png" id = "download">Click here to download image</a>
<canvas></canvas>
<script>
  setTimeout(function(){
    downloadCanvas();
  }, 4E3);

  function downloadImage(){
    document.getElementById('download').click();
  }

  function downloadCanvas(){
    var a = document.getElementById('download');
    var b = a.href;
    a.href = document.getElementsByTagName('canvas')[0].toDataURL();
    downloadImage();
    a.href = b;
  }
</script>

edited Aug 15 '16 at 09:04

answered Aug 15 '16 at 06:55

I don't really have an idea in where to put your code sir, Content-Type: application/octet-stream Content-Disposition: attachment;filename=\"yourImage.png\" – joven diojoy Aug 15 '16 at 07:13
@jovendiojoy. It is really unclear what you are exactly asking for? If you want to download file `yourImage.png` after timeout, then you need to edit headers of that image making it `ocet-stream`, so browser will download it instead of displaying it. Also, why you want to use a canvas? Canvas has nothing to do with downloading image. – Aug 15 '16 at 07:23
can you give me some code on where to put that? I really don't don't where to put that. sorry. Please. – joven diojoy Aug 15 '16 at 07:40
@jovendiojoy I edited my answer. Hope this is what you are looking for. – Aug 15 '16 at 08:01
sorry sir. I'm not using php for my application that I want to create. now I'm create a face detection and my only problem is that how I can download automatically download the image. by the way Thank you. – joven diojoy Aug 15 '16 at 08:09
@jovendiojoy. You can do it only using Javascript, but it doesn't work on some browsers. Check my answer. – Aug 15 '16 at 08:20
what if I will download the canvas as image? – joven diojoy Aug 15 '16 at 08:52
@jovendiojoy. If you found what you have been looking for and my answer helped you, consider accepting it. – Aug 15 '16 at 09:30
@jovendiojoy. By accepting answer I mean pressing little "accept" arrow on the right side of my answer. It will help other users find it useful. – Aug 15 '16 at 09:45
this doesn't work – chovy Nov 21 '21 at 07:50

how to make an auto download image in javascript by setTimeout?

1 Answers1