How to remove beginning string in a base64 encoded image?

Question

So I got a code for encoding an image to a base64 one..

  function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
      var reader = new FileReader();
      reader.onloadend = function() {
        callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.send();
  }

  toDataUrl('img/no_image_icon.png', function(base64Img) {
    console.log(base64Img); // remove the data:image/png;base64, in the beginning
  });

This code works though I want to remove the data:image/png;base64, in the beginning of the generated base64Img. And also, how can I access it outside of the function? Like example

  toDataUrl('img/no_image_icon.png', function(base64Img) {
   var accessOutside = base64Img; // remove the data:image/png;base64, in the beginning
  });

  var newVariable = accessOutside;

Any help would be much appreciated.

[How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323) And why do you want to remove that header? — Thomas, Dec 10 '16 at 14:53
@Thomas because at my front end code (angular) I already have that one — wobsoriano, Dec 10 '16 at 15:14
first: if you're already using angular, take a look at [its promises](https://docs.angularjs.org/api/ng/service/$q) *(promises in general)*, and the [thread that i've linked](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323) earlier, that will help you with your async-problem. and 2nd: you say, that you're adding the header in your frontend code? don't do that, that couples these two parts to tight together. So, instead of any URL to any Image, your frontend only works with base64 encoded PNGs. You see how limiting this is? — Thomas, Dec 10 '16 at 15:48
@Thomas I can see that. I'm developing an ionic app by the way — wobsoriano, Dec 10 '16 at 15:52

score 3 · Answer 1 · answered Dec 10 '16 at 14:47

3

Use String.replace() method

var base64Img = "data:image/png;base64,AAA=";
base64Img = base64Img.replace("data:image/png;base64,", "");
console.log(base64Img);

answered Dec 10 '16 at 14:47

Anton Shchyrov

285
3
15

4

you can be more generic with what you replace: `/data:.+?,/` – Thomas Dec 10 '16 at 14:50

score 1 · Answer 2 · answered Dec 10 '16 at 14:49

1

First you need to change the xhr to synchronous request.

xhr.open('GET', url, false);

and then define accessOutside as a global variable.

toDataUrl('img/no_image_icon.png', function(base64Img) {
   accessOutside = base64Img; // remove the data:image/png;base64, in the beginning
  });

and then you can get the accessOutside value from out side.

answered Dec 10 '16 at 14:49

chaoluo

2,596
1
17
29

I don't know why you need to get the value from out site, it'd better put your business code in the callback, change the xhr to asyn. – chaoluo Dec 10 '16 at 14:54
No, please, don't. That are both bad practices/advices, and will bite you in the ass eventually. – Thomas Dec 10 '16 at 14:55
This is just a way to get the value from out side, it better to change the xhr to asyn and do your things in callback function – chaoluo Dec 10 '16 at 14:58
I get an error saying Synchronous requests from a document must not set a response type. – wobsoriano Dec 10 '16 at 15:16

How to remove beginning string in a base64 encoded image?

2 Answers2