2

Tenho uma imagem que esta no banco de dados guardada em formato blob, tenho que usar o base64_encode no php antes de devolver a solicitação ajax e isso esta deixando o processo meio lento no lado do servidor. É possível fazer ou tem alguma função nativa no javascript ou jQuery que faça esse mesmo trabalho do base64_encode do php no lado do cliente no javascript ?

cenário atual: javascript

fun.ajaxFoto = custom.ajaxAsync(p,'getFoto','../view/rh/vFuncionarioDetalhes.php');
fun.ajaxFoto.done(function(json){
    $("#fun_foto").empty();
    var img = $('<img>').attr('src',"data:image/jpg;base64," + json.fun_foto);
});

vai para o arquivo vFuncionarioDetalhes.php

function getFoto(){
    global $colFuncionario; 

    $obj = (object) $_REQUEST['obj'];

    $json = $colFuncionario->getFoto($obj);

    // QUERIA MUDAR ESSA LINHA ABAIXO E ENTREGAR DIRETO O $json->fun_foto
    $json->fun_foto = base64_encode( $json->fun_foto );
    echo json_encode( $json );
}

Controller

public function getFoto($obj){
            global $c;
            $objResult = new stdClass();

            $c->conCordilheira();
            $mQuery = "select * from tab_cordilheira_ferias_gozo where fun_id =".$obj->fun_id;
            $query = "SELECT fd.foto as fun_foto FROM fundocumento fd where fd.cd_empresa=2011 and fd.cd_funcionario=".$obj->fun_id;

            $result = mssql_query($query);                
            $obj02 = mssql_fetch_object($result);
            //$result = odbc_exec($conn, $query);

            $c->conectarNovamente(@$_SESSION["usuario"],@$_SESSION["senha"]);
            $mResult = mysql_query($mQuery);
            $objM    = mysql_fetch_object($mResult);
            //$obj02 = odbc_fetch_object($result);

            $objResult->fun_dt_ferias = $objM->fun_mes_gozo;                
            $objResult->fun_foto =  $obj02->fun_foto;

            return $objResult;
        }

vou deixar a String que esta no formato blob para que seja possível fazer testes

$json->fun_foto="0xFFD8FFE1348345786966000049492A000800000011000E01020020000000DA0000000F01020005000000FA0000001001020009000000000100001A010500010000000A0100001B0105000100000012010000280103000100000002008A8732010200140000001A01000013020300010000000200838169870400010000004A01000001A40300010000000000898902A40300010000000000837F03A40300010000000000857F06A40300010000000000877E08A403000100000000007D7409A40300010000000000887F0AA403000100000000008179A5C407001C0000002E010000501500002020202020202020202020202020202020202020202020202020202020202000534F4E5900004453432D57333230000048000000010000004800000001000000323031333A30333A30342031363A30353A3234005072696E74494D00303330300000020002000100000001010100000016009A82050001000000580200009D820500010000006002000022880300010000000200FEFB27880300010000004006FFFB00900700040000003032323103900200140000006802000004900200140000007C02000001910700040000000102030002910500010000009002000004920A0001000000980200000592050001000000A002000007920300010000000500FFFF08920300010000000000FFFF09920300010000001000FFFE0A92050001000000A80200007C920700A0120000B002000000A00700040000003031303001A00300010000000100FFFF02A0040001000000B00A000003A0040001000000400E000000A307000100000003FEFEFE01A3070001000000015F605F000000000A000000E80300002D0000000A000000323031333A30333A30342031363A30353A323400323031333A30333A30342031363A30353A32340003000000010..."
15
  • Pra enviar via JSON, não. JSON é um formato de texto, se você quiser enviar dados binários no mesmo primeiro você precisa transformá-lo em texto (é o que o base64_encode está fazendo). Se você não quer fazer essa conversão no servidor, você precisaria enviar os dados no formato original, por exemplo em uma segunda requisição onde o cliente esperaria um image/jpeg.
    – mgibsonbr
    Commented 3/12/2015 às 18:02
  • 2
    Sinceramente, eu acho que isso é um "Problema XY": o que foi perguntado é se dá pra converter entre binário/base64 em JavaScript (o que dá, como a resposta do Guilherme Nascimento e a pergunta duplicada mostram), mas o problema real parece ser como enviar o blob para o cliente sem ter de fazer nenhuma conversão no lado servidor. Se eu estiver enganado, removo esse comentário em breve.
    – mgibsonbr
    Commented 3/12/2015 às 18:18
  • 1
    Por que BLOB ao invés de salvar em arquivos?
    – Syzoth
    Commented 3/12/2015 às 18:24
  • 1
    @GuilhermeNascimento Pelo que eu entendi, o front-end diz qual o funcionário de quem ele quer a foto ($_REQUEST['obj']) e o código PHP vai buscar essa foto no banco ($colFuncionario->getFoto($obj);). Não sei exatamente como isso acontece, pois não tenho experiência com PHP, mas foi o que eu entendi do código acima.
    – mgibsonbr
    Commented 3/12/2015 às 18:26
  • 1
    @mgibsonbr vem junto no ajax outros dados referente as férias do funcionário atualizei a pergunta p/ mostrar esse detalhe Commented 3/12/2015 às 18:27

2 Respostas 2

3

Base64 e javascript

As funções equivalentes no javascript são:

  • window.btoa para codificar
  • window.atob para decodificar

Fonte: https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64

var data = window.prompt("Digite a sua string:");

if (data) {
    var b64 = window.btoa(data);
    alert("Codificado: " + b64);
    alert("Decodificado: " + window.atob(b64));
} else {
    alert("Nada foi digitado");
}

O uso no seu caso acho que seria algo como:

var img = $('<img />').attr('src', "data:image/jpg;base64," + window.btoa(SUA STRING));

Performance no servidor

O que parece estar causando problemas de performance não é o base64, mas sim a maneira que você armazenou as imagens, talvez o melhor caminho seja deixar de usar o BLOB e passar a armazenar as imagens em pastas, que além de provavelmente ter melhor performance será muito mais fácil de trabalhar já que não irá precisar criar uma página dinâmica para exibir os dados.

Existem problemas ao usar BLOB e por isto faço da resposta do @utluiz a minha:

  • Volume de dados: para um baixo volume de dados pode não haver problema. Por outro lado, para armazenamento de grande massa de dados o banco de dados é praticamente inviável. Pergunte ao Facebook ou ao Google se eles usariam banco. O Facebook, por exemplo, usa um sistema de arquivos personalizado para tornar o acesso mais rápido ainda e diminuir a o overhead por arquivo exigido pelos sistemas de arquivos tradicionais.
  • Clusterização: uma vantagem do banco de dados é no caso do seu sistema rodar em vários servidores, todos terão acesso uniforme aos arquivos. Porém, usar uma unidade na rede para armazenar os arquivos.
  • Disponibilidade: seu sistema vai ter muitos acessos? Isso pode sobrecarregar um banco de dados tradicional. Por outro lado, seu servidor HTTP pode usar as rotinas de acesso de baixo nível ao sistema de arquivos para enviar o stream de dados ao cliente.
  • Escalabilidade: se a demanda de volume ou disponibilidade aumentarem, será possível adicionar mais capacidade ao sistema? É muito mais fácil dividir arquivos entre servidores diferentes do que distribuir registros de uma tabela em mais servidores.
  • Flexibilidade: fazer cópias de segurança, mover arquivos de um servidor para outro, fazer algum processamento nos arquivos armazenados, tudo isso fica mais fácil se os arquivos estiverem num diretório. Se você faz o deploy em ambiente de cliente, os arquivos no disco não inviabilizam você de receber cópias do banco de dados para testes. Tente pedir para o seu cliente enviar terabytes de dados para você analisar se der algum problema no banco.
  • Overhead de leitura e gravação: o custo computacional para gravar e ler dados do banco de dados é maior do que para ler e gravar diretamente em um arquivo.

E é isto que deve estar causando o seu problema de performance no servidor.

3
  • Esses métodos são para converter de strings para base64 e vice-versa, não? No caso o AP tem dados binários (uma imagem em blob). Ou esses métodos também funcionam pra blobs? (de todo modo, resta ainda a questão de como enviar o blob dentro de um JSON)
    – mgibsonbr
    Commented 3/12/2015 às 18:06
  • @mgibsonbr o base64_encode tanto quanto o window.btoa, ou melhor o base64 em si é usado para o transporte de dados "binários", como imagens por exemplo, independente de ser front-end ou back-end, tanto que usar base64 para strings ascii pode falhar, como na propria documentação do Mozilla informa, quando é usado dados ascii é necessário usar encodeuri, então sim, vai depender de como ele vai querer implementar, mas o uso do base64 é este mesmo basicamente.
    – Syzoth
    Commented 3/12/2015 às 18:11
  • Ok, eu estou meio confuso (parece que interpretei a pergunta de um modo diferente do que você interpretou), mas vou dar uma olhada mais de perto nessas funções antes de fazer qualquer avaliação.
    – mgibsonbr
    Commented 3/12/2015 às 18:14
2

O JavaScript possui sim funções que convertem de e para base64, ver a resposta do Guilherme Nascimento. Entretanto, isso não muda o fato de que você terá que converter sua imagem de BLOB para string antes de incluí-la no JSON (já que JSON é um formato de texto, e não aceita dados binários a menos que expressos na forma de texto).

Base 64 é uma das formas mais compactas de se representar dados binários em texto, de modo que qualquer alternativa certamente teria performance global pior. Você poderia tentar codificar seu BLOB em hexadecimal, como proposto na edição à pergunta, mas ainda que o processamento pelo servidor seja mais rápido o tempo de download do JSON (e a largura de banda consumida) será maior, além é claro do fato da conversão client-side tomar ainda mais tempo. Você alivia a carga no servidor, mas ao custo de pior performance e mais tráfego (que seu servidor ainda tem de gastar).

Minha sugestão é não enviar a foto no JSON, mas simplesmente fazer uma segunda requisição para obtê-la. Sem Ajax. Simplesmente faça, no retorno da primeira requisição Ajax (que devolve um JSON), algo como:

fun.ajaxFoto.done(function(json){
    $("#fun_foto").empty();
    var img = $('<img>').attr('src',"pegaFoto.php?funid=" + json.fun_id);
});

E no seu pegaFoto.php você já retorna o Blob diretamente no formato binário, com o mimetype imagem/jpeg (ver na documentação da sua ponte com o SGBD como fazer isso).

3
  • vou ver se da certo com essa técnica e retorno com os resultados Commented 3/12/2015 às 18:44
  • @SneepSNinjA Ok. Se quiser mais ajuda, por favor diga qual SGBD está usando, e posso complementar a resposta com o código PHP também (só achei um exemplo pra Firebird/InterBase até agora)
    – mgibsonbr
    Commented 3/12/2015 às 18:46
  • 1
    o SGBD é sql server, talvez o problema da performance seja isso, eu faço uma consulta no sqlSever e outra no Mysql, a foto do cabra esta em um sistema que estou migrando para o Mysql, então não terminei de migrar esse sistema dai tenho que entregar dos dados deste jeito metade-metade.... Commented 3/12/2015 às 18:49

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