convert base64 to image in javascript jquery

Question

I have written some code for image capturing using javascript jquery  Below is the code   function capture image         alert  capture image        var p   webcam capture        webcam save                   alert  capture complete   p     getting true here        var img   canvas toDataURL  image        var item image   img replace   data image   png jpg  base64               alert  item image  item image       The item image print the base64 format  How to convert that base64 to image and how to use that path in javascript clientside   Am searching google so many websites but its not working and that code is not suitable for my requirement

User · Answer

You can just create an Image object and put the base64 as its src  including the data image    part like this   var image   new Image    image src    data image png base64 iVBORw0K      document body appendChild image     It s what they call  Data URIs  and here s the compatibility table for inner peace

User · Answer

This is not exactly the OP s scenario but an answer to those of some of the commenters  It is a solution based on Cordova and Angular 1  which should be adaptable to other frameworks like jQuery  It gives you a Blob from Base64 data which you can store somewhere and reference it from client side javascript   html   It also answers the original question on how to get an image  file  from the Base 64 data   The important part is the Base 64 - Binary conversion   function base64toBlob base64Data  contentType        contentType   contentType            var sliceSize   1024      var byteCharacters   atob base64Data       var bytesLength   byteCharacters length      var slicesCount   Math ceil bytesLength   sliceSize       var byteArrays   new Array slicesCount        for  var sliceIndex   0  sliceIndex  lt  slicesCount    sliceIndex            var begin   sliceIndex   sliceSize          var end   Math min begin   sliceSize  bytesLength            var bytes   new Array end - begin           for  var offset   begin  i   0  offset  lt  end    i    offset                bytes i    byteCharacters offset  charCodeAt 0                     byteArrays sliceIndex    new Uint8Array bytes             return new Blob byteArrays    type  contentType         Slicing is required to avoid out of memory errors   Works with jpg and pdf files  at least that s what I tested   Should work with other mimetypes contenttypes too  Check the browsers and their versions you aim for  they need to support Uint8Array  Blob and atob   Here s the code to write the file to the device s local storage with Cordova   Android       window resolveLocalFileSystemURL cordova file externalDataDirectory  function dirEntry                            Setup filename and assume a jpg file                     var filename   attachment id    -     attachment fileName   attachment fileName    image            attachment fileType   attachment fileType    jpg                        dirEntry getFile filename    create  true  exclusive  false    function fileEntry                               attachment document holds the base 64 data at this moment                         var binary   base64toBlob attachment document  attachment mimetype                           writeFile fileEntry  binary  then function                                    Store file url for later reference  base 64 data is no longer required                             attachment document   fileEntry nativeURL                              function error                                WL Logger error  Error writing local file      error                               reject error code                                                       function errorCreateFile                            WL Logger error  Error creating local file      JSON stringify errorCreateFile                            reject errorCreateFile code                                               function errorCreateFS                        WL Logger error  Error getting filesystem      errorCreateFS                       reject errorCreateFS code                             Writing the file itself   function writeFile fileEntry  dataObj        return  q function resolve  reject               Create a FileWriter object for our FileEntry  log txt           fileEntry createWriter function fileWriter                 fileWriter onwriteend   function                     WL Logger debug LOG PREFIX    Successful file write                       resolve                                fileWriter onerror   function e                    WL Logger error LOG PREFIX    Failed file write      e toString                     reject e                                  If data object is not passed in                 create a new Blob instead              if   dataObj                    dataObj   new Blob   missing data      type   text plain                                 fileWriter write dataObj                          I am using the latest Cordova  6 5 0  and Plugins versions      I hope this sets everyone here in the right direction

User · Answer

Html     lt img id  imgElem  gt  lt  img gt    Js  string baseStr64   9j 4AAQSkZJRgABAQE      imgElem setAttribute  src    data image jpg base64     baseStr64

User · Answer

var src    data image jpeg base64    src    item image  var newImage   document createElement  img    newImage src   src  newImage width   newImage height    80   document querySelector   imageContainer   innerHTML   newImage outerHTML   where to insert your image

User · Answer

One quick and easy way   function paintSvgToCanvas uSvg  uCanvas         var pbx   document createElement  img         pbx style width    uSvg style width      pbx style height   uSvg style height       pbx src    data image svg xml base64     window btoa uSvg outerHTML       uCanvas getContext  2d   drawImage pbx  0  0

User · Answer

Have to add this based on  Joseph s answer  If someone want to create image object   var image   new Image    image onload   function       console log image width      image is loaded and we have image width    image src    data image png base64 iVBORw0K      document body appendChild image

[javascript] convert base64 to image in javascript/jquery

Examples related to javascript

Examples related to jquery

Examples related to base64