AngularJS - Converter um array de bytes em imagem

Front-end
#1

E aí, galerinha do GUJ!
Tudo bem com vocês?
Espero que alguém também use essa framework poderosíssima que é o AngularJS e possa me dar uma força, hehe.

Eu busco uma imagem na minha base de dados e retorno um array de bytes para a página. Quero exibir esse array, como uma imagem, em uma tab img, mas não funciona.
Código de busca:[code]function MyController($scope, $http, $location) {

var url = '/json/BuscarImagem?id=1';
$http.get(url).success(function(result) {
    $scope.foto = result.Foto;
}

}[/code]Testes .html[code]

[/code]Alguma ideia do que posso fazer?
Grato pela ajuda de todos,
fiquem com Deus! :smiley:

#2

Converte os bytes da imagem pra uma string base64 no servidor e coloca essa string como caminho da imagem.

Segue exemplo:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAAASCAIAAAA12XwWAAAAA3NCSVQICAjb4U/gAAAEWElEQVRY he1YT2jbZhT/ZQy0krrGOAGFWIoMSQi4awjDFHtohh0CGYRhH9aLm5xCDqHdJaGF+uhCQ33KyGH0 1CSX7GAzfAjLYdRRsSlmFKczM/FoFMnBhtjTXLcwn7yDLFl/7OAVdYPhHz5Iz+/T99773vu9Jw21 Wi0MYAU++q8N+P9gEErLMAilZfjYcH+490WB5+Rr12w6tOgDANTi23MlCd7gS5/HKf9byWd+TPib YBciR1P6hVoQjvVpGq9yMTuzsxy+XUztHnBL8nVvq4Sn0Ym6zgCd3ACTmg6Z5EY2F1PuKK0L3RQM T+vsaIqGCEDriC4rDeEo5fzxZKa3wx8KxVRKtv5CiFf60C/l/Icpods/tfg2rQ0TIGYTIxqnzAoo 5fzfb2+Y99UY864hiebNtFkplHlOPTf5rC6EeAU+sg9/5sNH8wAAc95lkht9PEBF7dWvDwB2nME5 HztO3SEDtF6hXQfqw7O5WFlMAcY0zyQflSRRo9/OplLuXnHxaKqj0EnVdqlJsXQypMlNyuZAQ3rR AEjNSRtg5kqx/PoEgG/x8d1Ia3XtcT9xtBCV/MmFJNqZlc/nNgmgLKb6WWWzT5pktbKwD1DeYEKJ uzO09tzekcgKmGGfqyVPenxfsjswFgRzzc4A3GlKAHAqPgEwznxr2E+blfQYw9Z5rpTzb+Uww57N G9Ph38Dp63gTcFMB0jM8+owq8Q8y+a/07MYdRIcONPeEY93fhSvlMmRHdGvp5UibCuQzA1i33s2p QCDNoS7tn+bvk562kKRWznnu7ZtzYPhtnQdYkvrsnNftp8vK+XDC5aDk6wI3sRWlM/la/1GwAsJJ Lqa45/z0+kO1Si5BU4r9tLdrEFby53+9pw3DNiUIKq6MTBLAhRD/LX9yIYmE4+YV0zJDB3eG1gSl NQMQs4ngiKdDTB8aCg3p8s7E1zqulKm5zj8p4rZFdsrprIumzTM9+owqSS/+qN5oAi46ZMPvhmVd 5krS41uNtL4JpgkA4KudxBQb1XfWWNsDMg0Z0JRix90bNABMBQJ2QG8nAJCe6VEHpRKcAuGpUmo9 FNrHSThuuXXM4LxqZwDuF24JwNVr42ZLOqEspna3okPqHEB6xj8xPggFLlxURMcv7zUBwnHT1svL fwx5hGAXIq27ym+B3cGlzUdJZEbPiQCcY/Qtg82He+E6xGwiWNQpTKizVCWf+ZlbAjBKhwz91k2t KJdGepXRKXCFbmM/RDtzlno4N+Y2T3l/00T57ut33qPF1/mlreiSVjLDntnefFcH7MyKtk7bVrWb jywz2oDOKnmibg83vsX7ZWG/JBn1XbOb8haKgljgJgqa14uufcw2MkkAavY0TE5pC5xejlRdGsYl HOtfK8MQ6fGtRs7surWUN1i1rsv/KY8mY1RAL6fHGPby5tP73ckZWhO8s+saCeUNVjUDo1kBrtl0 1xFQIYQuCStjaPCRzSoMPmdYhkEoLcPfLoonQ9mPrMkAAAAASUVORK5CYII= ">

#3

Sem sucesso. Alguma outra ideia?

#4

Se você acessar o endereço que retorna a imagem ele exibe a imagem no seu browser?

Eu fiz algo semelhante uma vez (com JQuery + SpringMVC), eu setava o mime type da imagem corretamente e retornava ela pelo controller. Depois eu só jogava o endereço no src da imagem, ao invés de fazer download manualmente…

#5

[quote=wagnerfrancisco]Se você acessar o endereço que retorna a imagem ele exibe a imagem no seu browser?

Eu fiz algo semelhante uma vez (com JQuery + SpringMVC), eu setava o mime type da imagem corretamente e retornava ela pelo controller. Depois eu só jogava o endereço no src da imagem, ao invés de fazer download manualmente…[/quote]
Na verdade, Wagner, eu não acesso um endereço, e sim retorno uma cadeia de bytes, e esses bytes são o conteúdo da imagem. Talvez, se eu salvar a imagem em um fake path eu consiga esse resultado, mas a ideia original é usar um array de bytes mesmo.

#6

[quote=Nicolas Fernandes][quote=wagnerfrancisco]Se você acessar o endereço que retorna a imagem ele exibe a imagem no seu browser?

Eu fiz algo semelhante uma vez (com JQuery + SpringMVC), eu setava o mime type da imagem corretamente e retornava ela pelo controller. Depois eu só jogava o endereço no src da imagem, ao invés de fazer download manualmente…[/quote]
Na verdade, Wagner, eu não acesso um endereço, e sim retorno uma cadeia de bytes, e esses bytes são o conteúdo da imagem. Talvez, se eu salvar a imagem em um fake path eu consiga esse resultado, mas a ideia original é usar um array de bytes mesmo.[/quote]

Eu entendi. Quando você acessa o /json/BuscarImagem?id=1 ele te retorna um array de bytes, certo? Se você setar os headers da request corretamente, ao entrar em /json/BuscarImagem?id=1 pelo browser, ele vai exibir a imagem. Deste modo, no html (ou nas diretivas do angular) fica transparente este byte array, você simplesmente acessa como se fosse uma imagem. Sempre que você alterar o elemento src do html ele busca a nova imagem. Com o controller do spring eu fiz o seguinte:

@RequestMapping(value = "/produtos/{id}/imagem", method = RequestMethod.GET)
    public ResponseEntity<byte[]> imagemDoProduto(@PathVariable("id") Long id)
            throws IOException {
        byte[] image = produtoService.imagemDoProduto(id);
        String fileName = "produto" + id + ".jpg";
  
        HttpHeaders responseHeaders = httpHeaderImageFile(fileName, image.length);
        return new ResponseEntity<byte[]>(image,
                                          responseHeaders, HttpStatus.OK);
    }
  
    // setando os headers
    public static HttpHeaders httpHeaderImageFile(final String fileName, final int fileSize) {
        String encodedFileName = fileName.replace('"', ' ').replace(' ', '_');
  
        HttpHeaders responseHeaders = new HttpHeaders();
        responseHeaders.setContentType(MediaType.parseMediaType("image/jpeg"));
        responseHeaders.setContentLength(fileSize);
        responseHeaders.add("Content-Disposition", "filename=\"" + encodedFileName + '\"');
        return responseHeaders;
    }

E no html simplesmente

<img src="produtos/algum_id/imagem" />
#7

Legal, obrigado pelas dicas.
Minha aplicação usa como server-side C#, mas vou usar esse seu código como base para o meu.
Qualquer coisa, volto a postar aqui!

#8