0

Ae galera! Estou com um problema que não consigo resolver de forma alguma. Já tentei muita coisa e não cheguei a lugar algum. Na empresa onde trabalho usamos um linguagem proprietária, que por sinal eu odeio. Quando faço uma requisição de uma imagem via $.ajax() (jQuery) o único retorno possível que tenho é uma string. Esta string está em binário. A partir desta string eu tenho que gerar uma imagem. Por exemplo: se abrirmos uma imagem (extensão jpeg, png ou jpg) com o bloco de notas, o que irá aparecer é um monte de caracteres. Se copiar este texto, colar no notepad e salvar como txt, é possível alterar a extensão deste arquivo para .jpeg e o que antes era um texto (.txt) vira uma imagem. Ok...

Ou seja, a bendita linguagem proprietária da empresa onde trabalho me envia esses caracteres/texto, porém não consigo gerar uma imagem e apresentá-la na tela.

Eu li sobre Blob. Segundo alguns postes que encontrei, é possível gerar uma imagem se eu criar um objeto Blob com os caracteres que eu recebi.

Eu acredito que seja algo com o type do blob:

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

Segue trecho da requisição ajax:

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

Alguém sabe como fazer isso?

2
  • Olá! Não sei exatamente o que você precisa fazer com a string (texto). Mas, utilizamos recentemente em um projeto uma lib para angular que gera imagens a partir das iniciais dos nomes, semelhante ao que o GMAIL faz. Exemplo, Tiago Silva ele cria uma imagem TL. Isso é feito localmente, pelo angular. Talvez seja um ponto de partida para você: http://uttesh.com/ngletteravatar/ Abraço e boa sorte!
    – Tiago Luz
    Commented 6/12/2016 às 0:01
  • 1
    Eu escreveria um serviço REST "proxy" que chama o seu serviço original e já retorna algo em Base64? Essa seria a solução mais limpa para evitar gambiarras de JavaScript. Caso contrário eu acho que você está no caminho "certo", veja essa resposta do SOen. Commented 6/12/2016 às 12:06

2 Respostas 2

1

Se o retorno for um base64, é possível concatenar a string com o src do elemento, usando as marcações 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" />

3
  • O código da imagem aberta no bloco de notas é algo como isso, só que no caso eu tirei um bom pedaço, pois não cabe aqui.. Olha: ÿØÿà JFIF ÿÛ C $" &0P40,,0bFJ:Ptfzxrfpn€¸œ€ˆ®Šnp Ú¢®¾ÄÎÐÎ|šâòàÈð¸ÊÎÆÿÛ C"$$0*0^44^Æ„p„ÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÿÀ ~" ÿÄ Commented 6/12/2016 às 1:10
  • a imagem é um jpg ou jpeg. Abra uma imagem neste formato com o notepad ou notepad++... Commented 6/12/2016 às 1:35
  • Segundo as tags da pergunta ele está usando AngularJS, então coloque no atributo ng-src pra ficar consistente com o framework
    – Sorack
    Commented 6/12/2016 às 3:02
0

Primeiro, precisamos tratar o binário, por padrão, o jQuery não trata respostas como binário, então, encontrei neste site a adição desta funcionalidade. Veja o bloco $.ajaxTransport.

Depois de obter esta funcionalidade, acompanhe o código a partir do .on('click'). O mesmo está comentado e explicando item a item.

Realizei o teste na máquina local, funciona perfeitamente. Não consegui fazer funcionar pelo snippet de código abaixo, pois, não encontrei algum local que forneça imagens via requisições ajax. Caso alguém conheça, disponibilize o link para que faça a inserção no código abaixo por favor.

$(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>

2
  • 1
    @JeffersonQuesado, o botão de executar do código não irá funcionar pois essa imagem não existe, coloquei uma observação "Realizei o teste na máquina local, funciona perfeitamente. Não consegui fazer funcionar pelo snippet de código abaixo, pois, não encontrei algum local que forneça imagens via requisições ajax. Caso alguém conheça, disponibilize o link para que faça a inserção no código abaixo por favor." Commented 24/08/2017 às 11:32
  • perdão, não li esse trecho da resposta. Vou remover meu comentário Commented 24/08/2017 às 11:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .