Convert binary data to base64 with javascript

问题:

HTML5 enable you to store data locally which I think it is great. For example here is how you can use it:

        var store = window.localStorage;
        store.setItem('foo', "hellow world");
        var test = store.getItem('foo');
        // test should = "hellow world"

In html you can dynamically display an image by settig its source to:

     "data:image/jpg;base64," + (base64string)

So my question is how can I convert binary data to a base64 string so that I can take advantage of html5 local storage?

For example it will be great if I could:

$.ajax({
   url: 'someImage.png',
   type: 'POST',
   success: function (r) {

                // here I want to convert r to a base64 string !
                // r is not binary so maybe I have to use a different approach
                var data = ConvertToBase64(r);



                document.getElementById("img").src = "data:image/png;base64," + data;
            },
});

---

I know I could solve this problem by wrapping the image around a canvas using html5 then converting that to base64string. also I can make a specific service on the server that will send a base64 string data of that image (someImage.aspx).I just want to know if it will by possible to retrieve binary data from a server and convert that to a base64 string.

回答1:

Try the btoa function:

   var data = btoa(r);

回答2:

To prevent 'InvalidCharacterError' error, you need to do this:

var base64EncodedStr = btoa(unescape(encodeURIComponent(rawData)));

回答3:

Use a FileReader to encode your image as a data URL:

jQuery.ajax({...})
.done(function (r) {
  var reader = new FileReader(
  reader.onload = (function(self) {
    return function(e) {
      document.getElementById("img").src = e.target.result;
    }
  })(this);
  reader.readAsDataURL(new Blob([r]));
});