Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

227
Views
Base64 image-data received from webservice not working

... even though it looks fine in console. Testing a webservice - mashape - and should receive a image in a base64-data stream. When I check the response in console (FF) it looks fine: The image is shown. But tracking the same data-stream in console shows a lot of "invalid characters" (not Base64). And the image is just a lot of characters (not a image). It seems like some encoding is made to the data-stream, when I try to get it. I have tried to get the "raw data", but don't know how.

I guess it is not about encoding/decoding base64 image? The data stream should already be base64-encoded. Perhaps it is more about preserve the base64-data in a raw format? Or a mimetype? Or? Help!

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "https://ronreiter-meme-generator.p.mashape.com/meme?top=suk",
        headers: { "X-Mashape-Key": "my secret key ;-)" },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        // mimeType: "text/plain; charset=x-user-defined",
        dataType: "text", //  html or json or xml

        success: function (data) {
            console.log(data);
            var src = "data:image/jpeg;charset=utf-8;base64, " + data;
            //var src = "data:image/jpeg;base64, " + data;
            $("output").html("<img src='" + src + "' alt='' />");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) { ...

enter image description here

OBS! Update ... thanks to this stackoverflow-post, I have found out, that this plain JavaScript code will solve the problem. It seams like the jQuery ajax does not have the possibility to add xhr.responseType='blob' - and that is what I am missing in my jQuery solution.

Is there perhaps a way to solve the problem (getting the image as blob) with jQuery ajax as asked in the initial question?

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var res = this.response;
        var reader = new window.FileReader();
        reader.readAsDataURL(res);
        reader.onloadend = function () {
            //done(reader.result.split('base64,')[1]);
            alert(reader.result);
            document.querySelector("output").innerHTML = "<img src='" + reader.result + "' />";
        }
    }
}
xhr.open("Get", "https://ronreiter-meme-generator.p.mashape.com/meme?top=suk");
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Mashape-Key', 'still a secret :-)');
xhr.send();
xhr.responseType = 'blob';
xhr.send();
about 4 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!