CONVERT Image url to Base64

Question

Using an Image File  I am getting the url of an image  that needs be to send to a webservice  From there the image has to be saved locally on my system    The code I am using   var imagepath       imageid   val      from this getting the path of the selected image  that var st   imagepath replace data image png or jpg  base64         How to convert the image url to BASE64

User · Answer

lt input id  inputFileToLoad  type  file  onchange  encodeImageFileAsURL       gt   lt div id  imgTest  gt  lt  div gt   lt script type  text javascript  gt    function encodeImageFileAsURL          var filesSelected   document getElementById  inputFileToLoad   files      if  filesSelected length  gt  0          var fileToLoad   filesSelected 0          var fileReader   new FileReader           fileReader onload   function fileLoadedEvent            var srcData   fileLoadedEvent target result      lt --- data  base64          var newImage   document createElement  img            newImage src   srcData           document getElementById  imgTest   innerHTML   newImage outerHTML          alert  Converted Base64 version is     document getElementById  imgTest   innerHTML           console log  Converted Base64 version is     document getElementById  imgTest   innerHTML                 fileReader readAsDataURL fileToLoad              lt  script gt

User · Answer

imageToBase64    URL    gt        let image      image   new Image        image crossOrigin    Anonymous       image addEventListener  load   function             let canvas   document createElement  canvas            let context   canvas getContext  2d            canvas width   image width          canvas height   image height          context drawImage image  0  0           try               localStorage setItem  saved-image-example   canvas toDataURL  image png               catch  err                console error err                        image src   URL      imageToBase64  image URL

User · Answer

I try using the top answer  but it occur Uncaught DOMException  Failed to execute  toDataURL  on  HTMLCanvasElement   Tainted canvases may not be exported  I found this is because of cross domain problems  the solution is function convert oldImag  callback        var img   new Image        img onload   function            callback img            img setAttribute  crossorigin    anonymous        img src   oldImag src    function getBase64Image img callback        convert img  function newImg           var canvas   document createElement  quot canvas quot            canvas width   newImg width          canvas height   newImg height          var ctx   canvas getContext  quot 2d quot            ctx drawImage newImg  0  0           var base64 canvas toDataURL  quot image png quot            callback base64           getBase64Image document getElementById  quot imageid quot   function base64      base64 in here      console log base64

User · Answer

Here s the Typescript version of Abubakar Ahmad s answer function imageTo64    url  string     callback   path64  string   ArrayBuffer    gt  void    void     const xhr   new XMLHttpRequest      xhr open  GET   url     xhr responseType    blob     xhr send       xhr onload       void   gt        const reader   new FileReader        reader readAsDataURL xhr response       reader onloadend       void   gt  callback reader result

User · Answer

This is your html-       lt img id  imageid  src    gt       lt canvas id  imgCanvas    gt    Javascript should be-     var can   document getElementById  imgCanvas       var img   document getElementById  imageid       var ctx   can getContext  2d       ctx drawImage img  10  10      var encodedBase   can toDataURL       encodedBase  Contains Base64 Encoding of Image

User · Answer

In todays JavaScript  this will work as well    x000D   x000D  const getBase64FromUrl   async  url    gt      const data   await fetch url     const blob   await data blob      return new Promise  resolve    gt        const reader   new FileReader        reader readAsDataURL blob        reader onloadend   function           const base64data   reader result           resolve base64data                  getBase64FromUrl  https   lh3 googleusercontent com i7cTyGnCwLIJhT1t2YpLW-zHt8ZKalgQiqfrYnZQl975-ygD 0mOXaYZMzekfKW ydHRutDbNzeqpWoLkFR4Yx2Z2bgNj2XskKJrfw8   then console log  x000D   x000D   x000D

User · Answer

HTML   lt img id imageid src https   www google de images srpr logo11w png gt    JavaScript  function getBase64Image img      var canvas   document createElement  canvas      canvas width   img width    canvas height   img height    var ctx   canvas getContext  2d      ctx drawImage img  0  0     var dataURL   canvas toDataURL  image png      return dataURL replace   data image   png jpg  base64            var base64   getBase64Image document getElementById  imageid       This method requires the canvas element  which is perfectly supported    The MDN reference of HTMLCanvasElement toDataURL    And the official W3C documentation

User · Answer

View this answer  https   stackoverflow com a 20285053 5065874 by  HaNdTriX  Basically  he implemented this function   function toDataUrl url  callback        var xhr   new XMLHttpRequest        xhr onload   function             var reader   new FileReader            reader onloadend   function                 callback reader result                     reader readAsDataURL xhr response              xhr open  GET   url       xhr responseType    blob       xhr send        And in your case  you can use it like this   toDataUrl imagepath  function myBase64        console log myBase64      myBase64 is the base64 string

User · Answer

let baseImage   new Image  baseImage setAttribute  crossOrigin    anonymous    baseImage src   your image url  var canvas   document createElement  canvas      canvas width   baseImage width    canvas height   baseImage height    var ctx   canvas getContext  2d      ctx drawImage baseImage  0  0     var dataURL   canvas toDataURL  image png      Additional information about  CORS enabled images   MDN Documentation

User · Answer

You Can Used This     function ViewImage     function getBase64 file      return new Promise  resolve  reject    gt        const reader   new FileReader        reader readAsDataURL file       reader onload        gt  resolve reader result       reader onerror   error   gt  reject error           var file   document querySelector  input type  file     files 0   getBase64 file  then data   gt     ImageBase46   val data        Add To Your Input onchange ViewImage

[javascript] CONVERT Image url to Base64

Examples related to javascript

Examples related to jquery