Force browser to download image files on click

Question

I need the browser to download the image files just as it does while clicking on an Excel sheet   Is there a way to do this using client-side programming only    lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head gt           lt title gt  lt  title gt           lt script type  text javascript  src  Scripts jquery-1 10 2 js  gt            document  ready function                         click function                         p   hide                                         lt  script gt       lt  head gt        lt script type  text javascript  gt          document onclick   function  e                e   e    window event              var element   e target    e srcElement              if  element innerHTML     Image                       someFunction element href                   var name   element nameProp                  var address   element href                  saveImageAs1 element nameProp  element href                   return false     Prevent default action and stop event propagation                           else                 return true                      function saveImageAs1 name  adress                if  confirm  you wanna save this image                       window win   open adress                     response redirect    testpage html                    setTimeout  win document execCommand  SaveAs     100                   setTimeout  win close     500                                lt  script gt        lt body gt           lt form id  form1  runat  server  gt               lt div gt                   lt p gt                       lt a href  http   localhost 55298 SaveImage demo Sample2 xlsx  target   blank  gt Excel lt  a gt  lt br   gt                       lt a href  http   localhost 55298 SaveImage demo abc jpg  id  abc  gt Image lt  a gt                   lt  p gt               lt  div gt           lt  form gt       lt  body gt   lt  html gt    How should it work in case of downloading an Excel sheet  what browsers do

User · Answer

I found that    lt a href  link to My Image File jpeg  download gt Download Image File lt  a gt   did not work for me  I m not sure why   I have found that you can include a  download true parameter at the end of your link to force a download  I think I noticed this technique being used by Google Drive   In your link  include  download true at the end of your href   You can also use this technique to set the filename at the same time    In your link  include  download true amp filename My Image File jpeg at the end of your href

User · Answer

Leeroy  amp  Richard Parnaby-King       UPDATE  As of spring 2018 this is no longer possible for cross-origin   hrefs  So if you want to create on a domain other than imgur com it   will not work as intended  Chrome deprecations and removals   announcement   function forceDownload url  fileName       var xhr   new XMLHttpRequest        xhr open  GET   url  true       xhr responseType    blob       xhr onload   function            var urlCreator   window URL    window webkitURL          var imageUrl   urlCreator createObjectURL this response           var tag   document createElement  a            tag href   imageUrl          tag download   fileName          document body appendChild tag           tag click            document body removeChild tag             xhr send

User · Answer

Using HTML5 you can add the attribute  download  to your links    lt a href   path to image png  download gt   Compliant browsers will then prompt to download the image with the same file name  in this example image png    If you specify a value for this attribute  then that will become the new filename    lt a href   path to image png  download  AwesomeImage png  gt   UPDATE  As of spring 2018 this is no longer possible for cross-origin hrefs  So if you want to create  lt a href  https   i imgur com IskAzqA jpg  download gt  on a domain other than imgur com it will not work as intended  Chrome deprecations and removals announcement

User · Answer

lt html gt   lt head gt   lt script type  text javascript  gt  function prepHref linkElement        var myDiv   document getElementById  Div contain image        var myImage   myDiv children 0       linkElement href   myImage src     lt  script gt   lt  head gt   lt body gt   lt div id  Div contain image  gt  lt img src  YourImage jpg  alt  MyImage  gt  lt  div gt   lt a href     onclick  prepHref this   download gt Click here to download image lt  a gt   lt  body gt   lt  html gt

User · Answer

A more modern approach using Promise and async await    toDataURL url        return fetch url  then  response    gt                return response blob               then blob   gt                return URL createObjectURL blob                   then  async download             const a   document createElement  a            a href   await toDataURL  https   cdn1 iconfinder com data icons ninja-things-1 1772 ninja-simple-512 png            a download    myImage png           document body appendChild a           a click            document body removeChild a       Find documentation here  https   developer mozilla org en-US docs Web API Fetch API Using Fetch

User · Answer

What about using the  click   function and the  tag    Compressed version    x000D   x000D   lt a id  downloadtag  href  examplefolder testfile txt  hidden download gt  lt  a gt  x000D   x000D   lt button onclick  document getElementById  downloadtag   click    gt Download lt  button gt  x000D   x000D   x000D    Now you can trigger it with js  It also doesn t open  as other examples  image and text files     js-function version    x000D   x000D  function download    x000D  document getElementById  downloadtag   click    x000D    x000D   lt  -- HTML -- gt  x000D   lt button onclick  download    gt Download lt  button gt  x000D   lt a id  downloadtag  href  coolimages awsome png  hidden download gt  lt  a gt  x000D   x000D   x000D

User · Answer

var pom   document createElement  a    pom setAttribute  href    data application octet-stream     encodeURIComponent text    pom setAttribute  download   filename   pom style display    none   document body appendChild pom   pom click    document body removeChild pom

User · Answer

I managed to get this working in Chrome and Firefox too by appending a link to the to document   var link   document createElement  a    link href    images jpg   link download    Download jpg   document body appendChild link   link click    document body removeChild link

User · Answer

Try this    lt a class  button  href  http   www glamquotes com wp-content uploads 2011 11 smile jpg  download  smile jpg  gt Download image lt  a gt

User · Answer

You don t need to write js to do that  simply use    lt a href  path to image jpg  alt  something  gt Download image lt  a gt    And the browser itself will automatically download the image   If for some reason it doesn t work add the download attribute  With this attribute you can set a name for the downloadable file    lt a href  path to image jpg  download  myImage  gt Download image lt  a gt

User · Answer

You can directly download this file using anchor tag without much code Copy the snippet and paste in your text-editor and try it       x000D   x000D   lt html gt  x000D   lt head gt  x000D   lt  head gt  x000D   lt body gt  x000D      lt div gt  x000D        lt img src  https   upload wikimedia org wikipedia commons 1 1f SMirC-thumbsup svg  width  200  height  200  gt  x000D         lt a href     download  https   upload wikimedia org wikipedia commons 1 1f SMirC-thumbsup svg  gt  Download Image  lt  a gt  x000D      lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

In 2020 I use Blob to make local copy of image  which browser will download as a file  You can test it on this site      function global      const next        gt  document querySelector   search-pagination  button-text   click      const uuid        gt  Math random   toString 36  substring 7     const toBlob    src    gt  new Promise  res    gt        const img   document createElement  img        const c   document createElement  canvas        const ctx   c getContext  2d        img onload     target     gt          c width   target naturalWidth        c height   target naturalHeight        ctx drawImage target  0  0         c toBlob  b    gt  res b    image jpeg   0 75              img crossOrigin           img src   src          const save    blob  name    image png     gt        const a   document createElement  a        a href   URL createObjectURL blob       a target     blank       a download   name      a click           global download        gt  document querySelectorAll   search-content  gallery-results figure  gt  img src    forEach async   src     gt  save await toBlob src      uuid    png       global next        gt  next       window

User · Answer

Update Spring 2018   lt a href   path to image jpg  download  FileName jpg  gt    While this is still supported  as of February 2018 chrome disabled this feature for cross-origin downloading meaning this will only work if the file is located on the same domain name   I figured out a workaround for downloading cross domain images after Chrome s new update which disabled cross domain downloading  You could modify this into a function to suit your needs  You might be able to get the image mime-type  jpeg png gif etc  with some more research if you needed to  There may be a way to do something similar to this with videos as well  Hope this helps someone      Leeroy  amp  Richard Parnaby-King            UPDATE  As of spring 2018 this is no longer possible for cross-origin     hrefs  So if you want to create  on a domain other     than imgur com it will not work as intended  Chrome deprecations and     removals announcement       x000D   x000D  var image   new Image    x000D  image crossOrigin    anonymous   x000D  image src    https   is3-ssl mzstatic com image thumb Music62 v4 4b f6 a2 4bf6a267-5a59-be4f-6947-d803849c6a7d source 200x200bb jpg   x000D     get file name - you might need to modify this if your image url doesn t contain a file extension otherwise you can set the file name manually x000D  var fileName   image src split          g  pop    x000D  image onload   function      x000D      var canvas   document createElement  canvas    x000D      canvas width   this naturalWidth     or  width  if you want a special scaled size x000D      canvas height   this naturalHeight     or  height  if you want a special scaled size x000D      canvas getContext  2d   drawImage this  0  0   x000D      var blob  x000D             get as Data URI x000D      if  image src indexOf   jpg    gt  -1    x000D      blob   canvas toDataURL  image jpeg    x000D        else if  image src indexOf   png    gt  -1    x000D      blob   canvas toDataURL  image png    x000D        else if  image src indexOf   gif    gt  -1    x000D      blob   canvas toDataURL  image gif    x000D        else   x000D      blob   canvas toDataURL  image png    x000D        x000D         body   html   lt b gt Click image to download  lt  b gt  lt br gt  lt a download      fileName      href      blob      gt  lt img src      blob       gt  lt  a gt     x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

This is a general solution to your problem  But there is one very important part that the file extension should match your encoding  And of course  that content parameter of downlowadImage function should be base64 encoded string of your image    x000D   x000D  const clearUrl   url   gt  url replace   data image   w  base64         x000D   x000D  const downloadImage    name  content  type    gt    x000D    var link   document createElement  a    x000D    link style    position  fixed  left -10000px    x000D    link href    data application octet-stream base64   encodeURIComponent content     x000D    link download       w   test name    name      name    type    x000D   x000D    document body appendChild link   x000D    link click    x000D    document body removeChild link   x000D    x000D   x000D    png    jpg    gif   forEach type   gt    x000D    var download   document querySelector     type     x000D    download addEventListener  click   function     x000D      var img   document querySelector   img    x000D   x000D      downloadImage  myImage   clearUrl img src   type   x000D        x000D      x000D  a gif image   lt image id  img  src  data image gif base64 R0lGODlhPQBEAPeoAJosM  AwO AwHVYZ z595kzAP s7P goOXMv8 fhw v739 f 8PD98fH 8mJl fn 9ZWb8 PzWlwv   6wWGbImAPgTEMImIN9gUFCEm gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz UMAOsJAP Z2ccMDA8PD 95eX5NWvsJCOVNQPtfX 8zM8 QePLl38MGBr8JCP zs9myn 8GBqwpAP GxgwJCPny78lzYLgjAJ8vAP9fX  MjMUcAN8zM 9wcM8ZGcATEL QePdZWf 29uc P9cmJu9MTDImIN  r7  vz8 P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo Pj  pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP 8vH9QUK vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O v70w5MLypoG8wKOuwsP g4P Q0IcwKEswKMl8aJ9fX2xjdOtGRs Pz Dg4GImIP8gIH0sKEAwKKmTiKZ8aB f39Wsl LFt8dgUE9PT5x5aHBwcP AgP WltdgYMyZfyywz78AAAAAAAD   8AAP9mZv   wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV euTeJm1Ki7A73qNWtFiF  gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM fOqD6DDj1aZpITp0dtGCDhr fVuCu3zlg49ijaokTZTo27uG7Gjn2P hI8 PDPERoUB318bWbfAJ5sUNFcuGRTYUqV 3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF ogxw5ZkSqIDaZBV6aSGYq lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav  Ca6G8A6Pr1x2kVMyHwsVxUALDq krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT QMbabI iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC PJHgxw0xH74yx 3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7 IQAlvQwEpnAC7DtLNJCKUoO w45c44GwCXiAFB OXAATQryUxdN4LfFiwgjCNYg kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v wRoRKQWGRHgrhGSQJxCS 0pCZbEhAAOw      gt  x000D   x000D   x000D   lt button id  png  gt Download PNG lt  button gt  x000D   lt button id  jpg  gt Download JPG lt  button gt  x000D   lt button id  gif  gt Download GIF lt  button gt  x000D   x000D   x000D

[javascript] Force browser to download image files on click

Examples related to javascript

Examples related to jquery

Examples related to html