Receive txt and generate image from text

Question

Hello guys! I have a problem that I cannot solve in any way. I have tried a lot and I have not gotten anywhere. In the company where I work we use proprietary language, which I hate. When I request an image via $.ajax() (jQuery) the only possible return I have is a string. This string is in binary. From this string I have to generate an image. For example: if we open an image (jpeg, png or jpg extension) with the notepad, what will appear is a lot of characters. If you copy this text, paste it into the Notepad and save it as txt, you can change the extension of this file to . jpeg and what was once a text (.txt) becomes an image. Ok...

That is, the blessed proprietary language of the company where I work sends me these characters/ text, but I cannot generate an image and present it on the screen.

I read about Blob. According to some posts I found, it is possible to generate an image if I create a Blob object with the characters I received.

I believe it’s something with the blob type:

var myBlob = new Blob([response], {type:"text/jpg"});

Here is an excerpt from the ajax request:

$.ajax({
    url: url,
    method: "POST",
    success: function(response){
               var myBlob = new Blob([response], {type: "text/jpeg"});
    }
 });

Someone knows how to do it?

Answer 1

If the return is a Base64, it is possible to concatenate the string with the src element, using the markings data:image/gif;base64:

var base64String = "iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAIAAADY27xgAAAAA3NCSVQICAjb4U\/gAAAAlnpUWHRS\r\nYXcgcHJvZmlsZSB0eXBlIEFQUDEAAHicVY5BDsMgDATvvIInjG0w8BxUkSpS1Vb5\/6EHSNvsZaVZ\r\na9fhPp7j2G\/xfby2\/TFCjDFGkRpSS007UJlSMEFQoCzk073VQgJk8cFFGW9uLsV8XhhAmz2JhUxN\r\nDaTPfHV9PXf+N\/L51yldmf46s1qzuth1S2w+AUD4AOdVNXTvLP3VAAAKV0lEQVRYhc2YWahm2VWA\r\n17DXPuc\/\/3jnGq7VldKkaDskbQcR7EZ9yaO0gvioKIREfM9DIBjzEESSgPok+CSNb4IGnCJigmij\r\nJtIopCSp7hru\/W\/VrTv\/wxn2sHYezn+7u27dquoqW+N6O4e99\/rYa9hrLUwpwYcqIThEy\/zMG+nD\r\n5Whl6+5flKX70aMYY5dXXh5vfXU6LX\/EKAAwGFztFJcf3P+Dsmz+j1E0gZ75tbzyOuLb9++94cMH\r\nPcU8j2atyvJmXb3T1O+ozlJyCQCBkTIrl\/POtaK4XhRrYl8N\/l93713f\/LHXPsix+EwRVFVvHx\/9\r\nQ13dQIxElsggEiICQAJISZNGVa8aRC5GXQe9ESKubXxxMBh+aChNs7P34M+8u82mMMYyGSQiQkRE\r\nQEBICVJKKSVVVY0a\/XxeF0URwhzptReu\/spTVXwgA+3v\/eXk5O9E+nln2bBhZmImIiQiRABsl72P\r\nJEaVlAwSGilc888nx68ORxefrOUpt5JSHG99LYTtLOuLCLNBtoQiFg0jMSNiSnS6WBcSY4zROe99\r\nJFLvmv393Y9e\/3xRXH9OlJTC1p3fRZwlWG+aNSJjhMSgMZjAqKIq5rkbjSYIKUFrLQQAVY0xeOfL\r\nyokB1zQnkzno0Wj5t9bWX3kelO07v9M4bNyVXq8ZjaY2M2KEjaSUVKNqVNW6ksPDUd5xo9EhJEYi\r\npoX5NMbprBJB1zR1Xc9mFdNkMPr86uq1Z0PZvf8nDx7Mi4KXlw9FciOZiCWiGEIIIcYFSkqKGMuy\r\nN5str6+PEZmIiNkYw2yaJooB5xrv\/cHBJM9hNg2XNr\/c7+ePajw\/xc1m\/zEeV0tLk6XRoTEdI7m1\r\nGSJ655xrvG+8b5xrXFM3dVNVnvCw1709Hl\/yvnRN451zTdPUTUoqVsRaESsiIllRxLt3vnGu0nMj\r\nKNz8wXfX1+7nWcYmFxFrBRGcc65xTeOa2jnvY4zMYBhUFSAhYtG5tbe3sTQax2iNMQlCluWqKmIR\r\nUcQagyqFlbf29j65tnbWhc9B2bp7Y9C\/KTZnIyIiNtMIx8eTunaqIaWYUkwak4aTqROxw+FKAtQ4\r\nS7rj3bCqVUyjKcUIWZaFEHhxkBgDGm1RzHfv\/+Pa2sfezQLno6jCbPrN4RCZRUQS4MlJjaidjuQ5\r\nheC998GD90rES0tZ464ORp8ZDDKA5P3R9OSf7m7R0vB2SilEAtAYIgAQCRsjgjFGE41qPZt+p9f\/\r\n6Sf5ysnJrTy\/zZwZw5Opcy4uLRf9fk4E+p6k1tlTIitv7977w8PDEwAUWV5eff2lj38GeehcRYgh\r\nhBhDDDGEgEhsDDMzGzFyfPztM6rPolTlv4h0NOHhYdXv2cGggPZh0TaVLpL7adxpSmDMzb3d35\/P\r\nF9WJSHHlhS9FHVmLMYQYQowhhACQmE9RROtqJ8bpkwwU\/PdixKpu1taHxhhC1KSaFgiQkmodo0sp\r\npAREF7P8JzvFi0Vx1drs\/ecMh78Qwt+EyAkAEJ2L1mZtnBMTEkGiqrrV633ifJQYp1V1pFqsrnUR\r\nkZiQMIUEKYUQy3lVN+Vw+HqWCaLNO9fyfEjnZYOmbuazbxixCBEAELGuY1HkANC+XCmJCDT13cei\r\nNPXhfF5duLCMSEzMzDGm2bQqy9K7OoaqU7y4svr04mMyvQHQxGgQQovivSICABASIaoaw8k148ca\r\naP9ge2mpj0jMhEiu0aiOSDNLkEg1doqPPZUDAOrqvxEFUgoxAkDjQqdTtDZGQkQCSAAc9SFfee9+\r\n5\/PaN3\/PnDNzCBBC6hQ2swYBW1cNoevcpadyxAje3QBgAICUosa6CllmICVIAADeZyINAKXkz0fZ\r\n3\/s20yGRaZpAhHlHoK3N2oIEcTbfzPO9p6JU1QRgFwABlAjnM1d0Tz0aAVGPjpYHg4OUEOGhZmmB\r\nMptVwX8LkOvaGyFmTNr6PiIiUZrNNgf9O82pdWOM\/jEFdDm\/gehDMI27trt7zMydXBAREBHBe4Po\r\nAVJKivTQo7hAOT76T6J9Ni8TRYQ2dWhKiRa1K6saES3nb7XrDw9Ptu9+xfmzhT4AeB\/Z\/PbGxS+t\r\nrn58dbXT7+e4EELU8Xh1dXVXI6SkIhtnUWKEqvp3Ni9d3vx1IrNIqKpJlZiIyflBUcyIJMbJdPId\r\nAKiqLYDxztZXnYtnUC5v\/uyVF17p97Pp9K+ILLZ1J5G1aXt7bWN9N8Y2cfssu3IWpaxKSDfXN36T\r\nCMRuxuj1tFZuo8m5blFUzIa52N97Q7XxbguxgLSzM\/6ac+dY6sH9N5I2bISZjWERHI8vjEYT5iZG\r\n1aSqrlNcewRl\/qA\/+Pk8HwBAr\/dKjE1bnMYYISVm1mSzDNiIMYJobr\/zFe+\/D8CAFnTn3vjrzj0U\r\nC\/t7fz6bvWlMLoZEyPvueGfzwoVplpUhtNVmYF6x9hEDAUyXVz7dfvf6P9WujbF9OgKzISLTiohI\r\nNpsdMm0t9qJVHT+4\/0a7fTI9vvXOHx8fvYm4omk4Ly8dHL4QY\/cjH9ln9sG3x8YY617\/Z85cpAGA\r\n5eWPiiycmbnb7X6qaf6LgzAzczBCIoiUiSBAQsCiKELw1sJphBUAN7bu\/inAtmvuhbCBuInIbNJo\r\nNO905mIzABu8C63EEKMfjn7uHJR3OVpZWf3Fu3f+zYQ8MDN777DT8SF0xS7Cezjq3ts57g8EUhtg\r\nSJipfn86K4tOr9OpjfFsjIiwsWwss4QQvPcLFF\/2+q8aMzgH5ewvWR4MPz2bfouo7bsws9PJdKXb\r\nbSC1aYbXN0aTk3JpuYAESISIRJZN5hqXZRkxMxsjC4vGGL133rdll1NNq2u\/fI7eR38BwOraL81n\r\n3\/W+XqjJoKoSEdksI6IYQ\/s4eJfaTEpISCiSidgYtaUxRpg5xuhd450L3gXvnDta3\/gsUfao0sc2\r\nHyEc3739BWtHNsusSNCBam9ttQTkNr406cH+NM9Np2NPnQaJKEQNQfv9DgCG9iq889555+v6uNt7\r\nbX3jV8\/V+KSWrK5ujbd\/L8uWxWZZxvsHVy9dPDDCxggitpXU\/sE0y0y3OKUhIkRNUJY1JEWM3rc8\r\nzjWTLHvx4uXPPU7dU3rmurq9M\/66kdxKLiL7B9c2N7eRLDMzMRER0cmkTklHo256X9OcNDWNK8tK\r\nNUCKzs2K7qc2LvzaE3Q9fagRwtHO9h+pHojtEXZOJlcuXtxClHcnCUjkmjCbNd1uZi3FGBe5WlNK\r\n6hpflvMse+ni5d8gAjztN1q9iO\/1Hx90vnK4\/9fHx3\/Lhon6k8mPr66MRQIgIxK0AxZIs5lrGm8t\r\nZ5YSaIxBY9RFRRxSikSrRF0AE7WXZZ9YW3\/ZmPfi5hmmTiGcHB1+cz57E7GZzq6LcL+3S6yLtJsQ\r\nIKlqVTVlOY\/q8vyqSB\/SMYAHYIACcMmYzSz\/iX7\/SlHk+FBH9owDMABQbcr598r5W2U5nk6LBFFk\r\nLmaG2CAmoq7IRtF9qdv7pMiFECDGoKqISMyG6Qmj5WdGeRhrEkLtHITAImAtG9NFlOc77X+E8uHK\r\n\/8oI+fnk\/xHKDwFCDVuRTRk4QwAAAABJRU5ErkJggg==";

function adicionarImg(imagem) {
   document.querySelector("#image").src = "data:image/gif;base64,"+ imagem;
}

adicionarImg(base64String);

<img id="image" />

Answer 2

First, we need to treat binary, by default, jQuery doesn’t treat answers as binary, so I found this website the addition of this feature. See the $.ajaxTransport block.

After obtaining this feature, follow the code from . on('click'). It is commented and explaining item by item.

I ran the test on the local machine, it works perfectly. I could not make it work by the code snippet below, because I could not find any location that provides images via ajax requests. If anyone knows, provide the link to make the insertion in the code below please.

$(function() {
  // Extraído do link acima
  $.ajaxTransport("+binary", function(options, originalOptions, jqXHR) {

    // check for conditions and support for blob / arraybuffer response type
    if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
      return {

        // create new XMLHttpRequest
        send: function(headers, callback) {

          // setup all variables
          var xhr = new XMLHttpRequest(),
            url = options.url,
            type = options.type,
            async = options.async || true,

            // blob or arraybuffer. Default is blob
            dataType = options.responseType || "blob",
            data = options.data || null,
            username = options.username || null,
            password = options.password || null;

          xhr.addEventListener('load', function() {
            var data = {};
            data[options.dataType] = xhr.response;

            // make callback and send data
            callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
          });

          xhr.open(type, url, async, username, password);

          // setup custom headers
          for (var i in headers) {
            xhr.setRequestHeader(i, headers[i]);
          }

          xhr.responseType = dataType;
          xhr.send(data);
        },
        abort: function() {
          jqXHR.abort();
        }
      };
    }
  });
  // Fim Extraído do link acima

  // Função de clique para chamar o Ajax
  $('.button').on('click', function(e) {

    // Requisição ao servidor
    $.ajax({
      url: "/minha-imagem.jpg",
      type: "GET",
      dataType: "binary",
      processData: false, // Obrigatório
      cache: false, // Opcional
      crossDomain: true,
      success: function(result, status, xhr) {

        // Resgata o tipo mime do arquivo vindo no cabeçalho do pacote
        // Exemplo: image/jpge
        var ct = xhr.getResponseHeader('content-type');

        // Cria o objeto Blog para gerar o base64
        var result = new Blob([result], {
          type: ct
        });

        // Metódo para ler o arquivo
        var reader = new window.FileReader();

        // Leitura do Blog como base64
        reader.readAsDataURL(result);

        // Quando a leitura terminar...
        reader.onloadend = function() {

          // Resgata a string
          base64data = reader.result;

          // Cria o iframe...
          var iframe = $('<iframe></iframe>');
    
          // Adiciona ao src a string base64, caso sempre for imagem, pode ser em um objeto img
          iframe.attr('src', base64data);

          // Insere no HTML o iframe com o conteúdo
          $("#result").html(iframe);
        }
      },
    });
  });
});

<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>

<button class="button">Imagem</button>
<div id="result"></div>