Publicado em 4 de ago.

Como inserir uma imagem retornada em uma requisição AJAX?

Boa tarde! Estou tendo o seguinte problema com o AJAX, eu encaminho uma requisição para uma página PHP que gera um gráfico em forma de imagem (png) e eu gostaria de inserir esta imagem que foi gerada em uma div. Esta imagem varia conforme os valores que eu passo na requisição.

Esse é o código que a página PHP gera:

<html>

<head>

<meta name="viewport" content="width=device-width; height=device-height;">
<link rel="stylesheet" href="resource://gre/res/ImageDocument.css">
<link rel="stylesheet" href="resource://gre/res/TopLevelImageDocument.css">
<link rel="stylesheet" href="chrome://global/skin/media/TopLevelImageDocument.css">
<title>geraGrafico.php (imagem PNG, 800 × 600 pixels)</title>

</head>

<body>
<img class="decoded" src="[http://localhost/testes/php/geraGrafico.php](http://localhost/testes/php/geraGrafico.php)" alt="[http://localhost/testes/php/geraGrafico.php](http://localhost/testes/php/geraGrafico.php)">
</body>

</html>

E esse é códgio código javascript que estou usando:

$.ajax({
url: './php/geraGrafico.php',
type: 'POST',
async: false,
data: {valores: valores, meses: meses},

 success: function(data){
 $("#dlgGraficoEvol").append(data);
 $("#dlgGraficoEvol").dialog({
 show: 'clip',
 hide: 'clip',
 title: 'Gráfico Evolutivo',
 position: 'top',
 width: 820
 });
 }
 });

Alguém sabe o que devo fazer para conseguir inserir esta imagem gerada?

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

CL4nG· 4 de ago.

var imagem = new Image();

imagem.src = "http:// www. site.com/php/geraGrafico.php?valores="+valores+"&meses="+meses;

 

document.getElementById("elemento").appendChild(imagem);

Exemplo:

<script>

window.onload = function()

{

	var imagem = new Image();
	imagem.src = "http://www.java2s.com/Tutorials/JavascriptImage/Document/Operation/Append_content_to_the_end_of_the_HTML_document_with_document_writeln_in_JavaScript_Example.PNG";

	document.getElementById("image").appendChild(imagem);
}

</script>

<div id="image">

</div>

eriksonsr· 4 de ago.

Não posso passar os parâmetros por url, eles são muito grandes e ultrapassam o limite permitido.

CL4nG· 5 de ago.

Mande os argumentos por POST, e no arquivo php você retorna uma imagem codificada em base64.

HTML:

<script>

$(document).ready(function()

{

	$.post("http://localhost/h/page.php", {valores: "1111"}, function(imagem)
	{
 var image = new Image();
 image.src = 'data:image/png;base64,'+imagem;
 document.body.appendChild(image);
	});
});
</script>

<body>

</body>

PHP:

<?php

 header("Content-Type: image/png");
 echo base64_encode( file_get_contents("imagem.png") );
?>
Você já tem ali o retorno em "success: function(data)" então faça a alteração no seu arquivo PHP e em function(data){} você adiciona: 

var image = new Image();

image.src = 'data:image/png;base64,'+imagem;