AngularJS - Converter um array de bytes em imagem

20 de fevereiro de 2013 6 respostas

Nicolas_Fernandes 20 de fevereiro de 2013

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:

function MyController($scope, $http, $location) {

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

Testes .html

<!-- Não funciona -->
<img src="{{foto}}" />
<!-- Também não funciona -->
<img ng-src="{{foto}}" />

Alguma ideia do que posso fazer? Grato pela ajuda de todos, fiquem com Deus! :D

6 Respostas

Beto_Sagaz 20 de fev. de 2013

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

Segue exemplo:

Nicolas_Fernandes 21 de fev. de 2013

Sem sucesso. Alguma outra ideia?

wagnerfrancisco 21 de fev. de 2013

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…

Nicolas_Fernandes 22 de fev. de 2013

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…

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.

wagnerfrancisco 22 de fev. de 2013

Nicolas Fernandes:
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…

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.

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" />

Nicolas_Fernandes 22 de fev. de 2013

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!

Criado 20 de fevereiro de 2013

Ultima resposta 22 de fev. de 2013

Respostas 6

Participantes 3

6 Respostas

Topicos relacionados