Get image data url in JavaScript

Question

I have a regular HTML page with some images  just regular  lt img   gt  HTML tags   I d like to get their content  base64 encoded preferably  without the need to redownload the image  ie  it s already loaded by the browser  so now I want the content    I d love to achieve that with Greasemonkey and Firefox

User · Accepted Answer

Note  This only works if the image is from the same domain as the page  or has the crossOrigin  anonymous  attribute and the server supports CORS  It s also not going to give you the original file  but a re-encoded version  If you need the result to be identical to the original  see Kaiido s answer     You will need to create a canvas element with the correct dimensions and copy the image data with the drawImage function  Then you can use the toDataURL function to get a data  url that has the base-64 encoded image  Note that the image must be fully loaded  or you ll just get back an empty  black  transparent  image   It would be something like this  I ve never written a Greasemonkey script  so you might need to adjust the code to run in that environment   function getBase64Image img           Create an empty canvas element     var canvas   document createElement  canvas        canvas width   img width      canvas height   img height          Copy the image contents to the canvas     var ctx   canvas getContext  2d        ctx drawImage img  0  0           Get the data-URL formatted image        Firefox supports PNG and JPEG  You could check img src to        guess the original format  but be aware the using  image jpg         will re-encode the image      var dataURL   canvas toDataURL  image png         return dataURL replace   data image   png jpg  base64             Getting a JPEG-formatted image doesn t work on older versions  around 3 5  of Firefox  so if you want to support that  you ll need to check the compatibility  If the encoding is not supported  it will default to  image png

User · Answer

In HTML5 better use this           canvas width   img naturalWidth    img width  canvas height   img naturalHeight    img height

User · Answer

shiv   shim   sham  If your image s  are already loaded  or not   this  tool  may come in handy   Object defineProperty       HTMLImageElement prototype  toDataURL        enumerable false configurable false writable false value function m q                let c document createElement  canvas            c width this naturalWidth  c height this naturalHeight          c getContext  2d   drawImage this 0 0   return c toDataURL m q                  but why   This has the advantage of using the  already loaded  image data  so no extra request in needed  Aditionally it lets the end-user  programmer like you  decide the CORS and or mime-type and quality -OR- you can leave out these arguments parameters as described in the MDN specification here   If you have this JS loaded  prior to when it s needed   then converting to dataURL is as simple as   examples  HTML   lt img src   yo jpg  onload  console log this toDataURL  image jpeg     gt    JS  console log document getElementById  someImgID   toDataURL       GPU fingerprinting  If you are concerned about the  preciseness  of the bits then you can alter this tool to suit your needs as provided by  Kaiido s answer

User · Answer

Use onload event to convert image after loading   x000D   x000D  function loaded img    x000D    let c   document createElement  canvas   x000D    c getContext  2d   drawImage img  0  0  x000D    msg innerText  c toDataURL    x000D    x000D  pre   word-wrap  break-word  width  500px  white-space  pre-wrap    x000D   lt img onload  loaded this   src  https   cors-anywhere herokuapp com http   lorempixel com 200 140  crossorigin  anonymous   gt  x000D   x000D   lt pre id  msg  gt  lt  pre gt  x000D   x000D   x000D

User · Answer

This is all you need to read  https   developer mozilla org en-US docs Web API FileReader readAsBinaryString var height   200  var width    200   canvas width    width  canvas height   height   var ctx   canvas getContext  2d     ctx strokeStyle     090   ctx beginPath    ctx arc width 2  height 2  width 2 - width 10  0  Math PI 2   ctx stroke     canvas toBlob function  blob        consider blob is your file object    var reader   new FileReader       reader onload   function          console log reader result          reader readAsBinaryString blob

User · Answer

A more modern version of kaiido s answer using fetch would be   function toObjectUrl url      return fetch url         then  response   gt            return response blob                    then blob  gt            return URL createObjectURL blob                 https   developer mozilla org en-US docs Web API Fetch API Using Fetch  Edit  As pointed out in the comments this will return an object url which points to a file in your local system instead of an actual DataURL so depending on your use case this might not be what you need   You can look at the following answer to use fetch and an actual dataURL  https   stackoverflow com a 50463054 599602

User · Answer

This Function takes the URL then returns the image BASE64  function getBase64FromImageUrl url        var img   new Image         img setAttribute  crossOrigin    anonymous         img onload   function              var canvas   document createElement  canvas            canvas width  this width          canvas height  this height           var ctx   canvas getContext  2d            ctx drawImage this  0  0            var dataURL   canvas toDataURL  image png             alert dataURL replace   data image   png jpg  base64                      img src   url      Call it like this      getBase64FromImageUrl  images slbltxt png

User · Answer

Coming long after  but none of the answers here are entirely correct   When drawn on a canvas  the passed image is uncompressed   all pre-multiplied  When exported  its uncompressed or recompressed with a different algorithm  and un-multiplied   All browsers and devices will have different rounding errors happening in this process  see Canvas fingerprinting    So if one wants a base64 version of an image file  they have to request it again  most of the time it will come from cache  but this time as a Blob     Then you can use a FileReader to read it either as an ArrayBuffer  or as a dataURL    x000D   x000D  function toDataURL url  callback   x000D      var xhr   new XMLHttpRequest    x000D      xhr open  get   url   x000D      xhr responseType    blob   x000D      xhr onload   function    x000D        var fr   new FileReader    x000D       x000D        fr onload   function    x000D          callback this result   x000D           x000D       x000D        fr readAsDataURL xhr response      async call x000D         x000D       x000D      xhr send    x000D    x000D   x000D  toDataURL myImage src  function dataURL   x000D    result src   dataURL  x000D   x000D       now just to show that passing to a canvas doesn t hold the same results x000D    var canvas   document createElement  canvas    x000D    canvas width   myImage naturalWidth  x000D    canvas height   myImage naturalHeight  x000D    canvas getContext  2d   drawImage myImage  0 0   x000D   x000D    console log canvas toDataURL       dataURL      false - not same data x000D        x000D   lt img id  myImage  src  https   dl dropboxusercontent com s 4e90e48s5vtmfbd aaa png  crossOrigin  anonymous  gt  x000D   lt img id  result  gt  x000D   x000D   x000D

[javascript] Get image data url in JavaScript?

Examples related to javascript

Examples related to image

Examples related to firefox

Examples related to greasemonkey

Examples related to base64