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!
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=
">
Sem sucesso. Alguma outra ideia?
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=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=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" />
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!