0

I'm newbie on this but I have this problem, I'm using an API which gives me as result a PNG image binary string:

enter image description here

I want to convert this to base64 and put it as an attribute in an img tag

<img id="ml">

So tried, doing this:

$("#ml").attr("src",'data:image/png;base64,'+ btoa(unescape(encodeURIComponent(response))) );

But this shows me a broken image:

enter image description here

I tried with this getting the same error:

var blob = new Blob([response], {type: 'image/png'});
var reader = new FileReader();

reader.onload = function (e) {
  $('#ml').attr('src', e.target.result);
};

reader.readAsDataURL(blob);

Finally I used a library: https://github.com/dankogai/js-base64

var emk = Base64.encode(response);
$("#ml").attr("src",'data:image/png;base64,'+ emk );

But the result is the same.

I don't know if I'm missing something, I'd like to receive your help.

=====

UPDATE:

As you mentioned in the comments I mention the previous step:

I obtain this binary result from VanceAI API. I upload an image, then process applying an edition provided by API service and finally the result is for download, this is the code:

var form = new FormData();
    form.append("api_token", "XXXXXXX1234AAAAAA");
    form.append("trans_id", "XXXXBBBBVVVVVVVV"); //processed image ID

    var settings = {
      "url": "https://api-service.vanceai.com/web_api/v1/download?api_token=XXXXXXX1234AAAAAA",
      "method": "POST",
      "timeout": 0,
      "processData": false,
      "mimeType": "multipart/form-data",
      "contentType": false,
      "data": form
    };

    $.ajax(settings).done(function (response) {
            console.log(response); // binary result
    });

I also tried this:

$("#ml").attr("src",'data:image/png;base64,'+ btoa(response) );

But I get this error:

enter image description here

I also have to mention this result is not a Blob.

I hope you can help me.

Thanks.

NekoLopez
  • 579
  • 1
  • 9
  • 28
  • https://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript – Philipp Sengelmann Feb 17 '23 at 00:14
  • try this: $("#ml").attr("src", "data:image/png;base64," + btoa(response)); – Talmacel Marian Silviu Feb 17 '23 at 02:00
  • 1
    By the time you read it as text the data is already broken. You need to consume the response from the server as binary data (Blob, or ArrayBuffer from an AJAX request). But maybe the easiest is to just plug your API request to the `` tag, if possible. All in all, what we need to see is the request made to the API, i.e one step before. – Kaiido Feb 17 '23 at 04:43
  • "*binary string*" - there's your first mistake. You either have *binary* `blob` in js terms *or* text (`string`); a string may be *encoded*. So how you get this string is the issue - if you're using `fetch()` and `await result.text()` then change it to `await result.blob()` to get *binary*. You can then use `FileReader` or `URL.createObjectURL`. If you provide us with how you get the "binary string"[sic] then we might be able to help you further. – freedomn-m Feb 17 '23 at 10:40
  • `btoa` = binary to string - so calling this on the result of `unsescape` or `encodeURIComponent` makes no sense as these return strings. – freedomn-m Feb 17 '23 at 10:41
  • @TalmacelMarianSilviu I also tried that but it didn't work – NekoLopez Feb 17 '23 at 15:58
  • 1
    So based on your update what you want is in `settings` you'd add a new field `{ xhrFields: { responseType: "blob" } }`, then in the `done` callback `$("#ml").prop("src", URL.createObjectURL(response))`. – Kaiido Feb 20 '23 at 07:40

0 Answers0