Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Imagem Salva em Binario e tentativa de mostrar em base64

Teacher, bom dia, tudo bem ?

Sei que não é do Escope do curso, mas devido ao amplo conhecimento no assunto, resolvi criar um topico, eu estou tentando avançar na aplicação após ter finalizado o curso criar um recurso para upload de Imagens no Banco MongoDB e renderiza-las, mas no Front-end fica aparecendo apenas um Array de Bits:

para exibição tentei várias formas, mas nada:

        <img src="{{foto.img.data}}"/>
        <img src="data:image/png;base64,{{foto.img.data.data}}"/>
        <img src="data:image/png;base64,{{foto.img.data.data}}"/>
        <img ng-src="data:image/png;base64"/>
        <hr>
        <img ng-src="{{foto.img.data.data.toString('base64')}}"/>
        <span>{{foto.name}}</span>
        <hr>
        <div>{{foto}}</div>
        <hr>

        <div>{{foto.img.data.data}}</div>

Exemplo de como aparece a imagem:

{"img":{"data":{"type":"Buffer","data":[137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,16,0,0,0,16,8,4,0,0,0,181,250,55,234,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,0,32,99,72,82,77,0,0,122,38,0,0,128,132,0,0,250,0,0,0,128,232,0,0,117,48,0,0,234,96,0,0,58,152,0,0,23,112,156,186,81,60,0,0,0,2,98,75,71,68,0,0,170,141,35,50,0,0,0,9,112,72,89,115,0,0,14,196,0,0,14,196,1,149,43,14,27,0,0,0,7,116,73,77,69,7,228,3,30,1,59,17,225,167,12,181,0,0,0,223,73,68,65,84,40,207,125,209,61,78,2,81,20,197,241,31,195,136,46,128,214,196,8,84,16,176,100,1,18,43,75,86,160,59,160,115,1,118,58,146,24,108,96,3,102,102,5,90,187,2,181,177,240,99,15,22,38,162,22,51,60,6,35,158,234,222,243,63,239,222,151,247,42,22,234,56,182,109,142,216,155,169,123,37,213,140,93,218,13,125,195,68,162,182,196,153,253,162,222,211,43,170,129,116,17,25,7,220,147,201,116,67,36,33,210,81,117,235,47,221,216,212,230,162,180,155,110,56,15,77,231,100,37,227,201,181,59,135,37,39,139,205,87,198,158,106,217,42,245,95,209,10,62,209,250,117,143,239,72,236,63,85,35,175,26,107,113,203,75,100,106,180,54,48,50,139,60,248,48,8,86,95,63,212,7,222,61,230,79,157,22,145,186,161,161,122,129,83,27,203,223,72,76,52,75,187,175,156,229,184,18,204,182,35,59,62,17,123,54,203,135,243,3,4,228,42,83,210,178,82,132,0,0,0,37,116,69,88,116,100,97,116,101,58,99,114,101,97,116,101,0,50,48,50,48,45,48,51,45,51,48,84,48,49,58,53,57,58,49,55,43,48,48,58,48,48,165,137,219,194,0,0,0,37,116,69,88,116,100,97,116,101,58,109,111,100,105,102,121,0,50,48,50,48,45,48,51,45,51,48,84,48,49,58,53,57,58,49,55,43,48,48,58,48,48,212,212,99,126,0,0,0,25,116,69,88,116,83,111,102,116,119,97,114,101,0,119,119,119,46,105,110,107,115,99,97,112,101,46,111,114,103,155,238,60,26,0,0,0,0,73,69,78,68,174,66,96,130]},"contentType":"image/png"},"id":"5f504a7853ad403d5cf2c207","name":"fgfsdf","_v":0} [137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,16,0,0,0,16,8,4,0,0,0,181,250,55,234,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,0,32,99,72,82,77,0,0,122,38,0,0,128,132,0,0,250,0,0,0,128,232,0,0,117,48,0,0,234,96,0,0,58,152,0,0,23,112,156,186,81,60,0,0,0,2,98,75,71,68,0,0,170,141,35,50,0,0,0,9,112,72,89,115,0,0,14,196,0,0,14,196,1,149,43,14,27,0,0,0,7,116,73,77,69,7,228,3,30,1,59,17,225,167,12,181,0,0,0,223,73,68,65,84,40,207,125,209,61,78,2,81,20,197,241,31,195,136,46,128,214,196,8,84,16,176,100,1,18,43,75,86,160,59,160,115,1,118,58,146,24,108,96,3,102,102,5,90,187,2,181,177,240,99,15,22,38,162,22,51,60,6,35,158,234,222,243,63,239,222,151,247,42,22,234,56,182,109,142,216,155,169,123,37,213,140,93,218,13,125,195,68,162,182,196,153,253,162,222,211,43,170,129,116,17,25,7,220,147,201,116,67,36,33,210,81,117,235,47,221,216,212,230,162,180,155,110,56,15,77,231,100,37,227,201,181,59,135,37,39,139,205,87,198,158,106,217,42,245,95,209,10,62,209,250,117,143,239,72,236,63,85,35,175,26,107,113,203,75,100,106,180,54,48,50,139,60,248,48,8,86,95,63,212,7,222,61,230,79,157,22,145,186,161,161,122,129,83,27,203,223,72,76,52,75,187,175,156,229,184,18,204,182,35,59,62,17,123,54,203,135,243,3,4,228,42,83,210,178,82,132,0,0,0,37,116,69,88,116,100,97,116,101,58,99,114,101,97,116,101,0,50,48,50,48,45,48,51,45,51,48,84,48,49,58,53,57,58,49,55,43,48,48,58,48,48,165,137,219,194,0,0,0,37,116,69,88,116,100,97,116,101,58,109,111,100,105,102,121,0,50,48,50,48,45,48,51,45,51,48,84,48,49,58,53,57,58,49,55,43,48,48,58,48,48,212,212,99,126,0,0,0,25,116,69,88,116,83,111,102,116,119,97,114,101,0,119,119,119,46,105,110,107,115,99,97,112,101,46,111,114,103,155,238,60,26,0,0,0,0,73,69,78,68,174,66,96,130]

Caso tenha alguma dica eu agradeço ;D

3 respostas
solução!

Fala ai Luiz, tudo bem? Olhando os dados que você compartilhou a conversão não está sendo feita para base64 e sim em um array de buffer.

Nesse caso, tu precisa converter esse Buffer e criar uma URL temporária para ele, seria algo assim:

const buffer = new Uint8Array(ba)
const blob = new Blob([buffer], { type: 'image/png' })
const url = URL.createObjectURL(blob)
image.src = url

Onde ba seria o seu array de Buffer, exemplo:

[137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,16,0,0,0,16,8,4,0,0,0,181,250,55,234,0,0,0,4,103,65,77,65,0,0,177,143,11,252,97,5,0,0,0,32,99,72,82,77,0,0,122,38,0,0,128,132,0,0,250,0,0,0,128,232,0,0,117,48,0,0,234,96,0,0,58,152,0,0,23,112,156,186,81,60,0,0,0,2,98,75,71,68,0,0,170,141,35,50,0,0,0,9,112,72,89,115,0,0,14,196,0,0,14,196,1,149,43,14,27,0,0,0,7,116,73,77,69,7,228,3,30,1,59,17,225,167,12,181,0,0,0,223,73,68,65,84,40,207,125,209,61,78,2,81,20,197,241,31,195,136,46,128,214,196,8,84,16,176,100,1,18,43,75,86,160,59,160,115,1,118,58,146,24,108,96,3,102,102,5,90,187,2,181,177,240,99,15,22,38,162,22,51,60,6,35,158,234,222,243,63,239,222,151,247,42,22,234,56,182,109,142,216,155,169,123,37,213,140,93,218,13,125,195,68,162,182,196,153,253,162,222,211,43,170,129,116,17,25,7,220,147,201,116,67,36,33,210,81,117,235,47,221,216,212,230,162,180,155,110,56,15,77,231,100,37,227,201,181,59,135,37,39,139,205,87,198,158,106,217,42,245,95,209,10,62,209,250,117,143,239,72,236,63,85,35,175,26,107,113,203,75,100,106,180,54,48,50,139,60,248,48,8,86,95,63,212,7,222,61,230,79,157,22,145,186,161,161,122,129,83,27,203,223,72,76,52,75,187,175,156,229,184,18,204,182,35,59,62,17,123,54,203,135,243,3,4,228,42,83,210,178,82,132,0,0,0,37,116,69,88,116,100,97,116,101,58,99,114,101,97,116,101,0,50,48,50,48,45,48,51,45,51,48,84,48,49,58,53,57,58,49,55,43,48,48,58,48,48,165,137,219,194,0,0,0,37,116,69,88,116,100,97,116,101,58,109,111,100,105,102,121,0,50,48,50,48,45,48,51,45,51,48,84,48,49,58,53,57,58,49,55,43,48,48,58,48,48,212,212,99,126,0,0,0,25,116,69,88,116,83,111,102,116,119,97,114,101,0,119,119,119,46,105,110,107,115,99,97,112,101,46,111,114,103,155,238,60,26,0,0,0,0,73,69,78,68,174,66,96,130]

Espero ter ajudado.

Grande Teacher, vc me deu uma luz imensa, eu me deslizei em um item "basico", n foi bem essa solução que consegui para o meu codigo, mas graças ao seu comentario consegui resolver, dei algumas googadas sobre "arraybuffer to image javascript" e deu certo, Obrigado ;D

Magina Luiz, fico feliz que tenha lhe ajudado de alguma forma.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software