[Resolvido] Retornar Imagem Gerada com PHP em Ajax

[Wendel Rodrigues 0]

Tenho o seguinte código PHP que gera um QR Code com um texto passado via GET:

 

<?php
$txt = $_GET["txt"];
if ($txt==""){
	$txt = "QRCode";
}
require_once("Image/QRCode.php");
$qr = new Image_QRCode();
$options = array(
	"module_size" => 10,  // Tamanho
	"image_type" => 'png' // Formato
 );
$qr->makeCode($txt, $options);
?>

 

E tenho a seguinte função Ajax que retorna o conteúdo gerado pelo arquivo PHP:

 

var XMLHttp;

// ### Postar Comentário ###
function Ajax(txt) {
 XMLHttp = null;
 Caminho = "QRCode.php?txt="+txt;

// Procura por um objeto nativo (Mozilla/Safari)
 if (window.XMLHttpRequest) {
   XMLHttp = new XMLHttpRequest();
   XMLHttp.onreadystatechange = Mostra;
   document.getElementById("qrCode").innerHTML = "<h3>Processando...</h3>";
   XMLHttp.open("GET", Caminho, true);
   XMLHttp.send(null);
   // Procura por uma versão ActiveX (IE)
 }
else if (window.ActiveXObject) {
   XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
   if (XMLHttp) {
     XMLHttp.onreadystatechange = Mostra;
		document.getElementById("qrCode").innerHTML = "<h3>Processando...</h3>";
     XMLHttp.open("GET", Caminho, true);
     XMLHttp.send();
   }
 }
}

function Mostra() {
 //apenas quando o estado for "completado"
 if (XMLHttp.readyState == 4) {
   //apenas se o servidor retornar "OK"
   if (XMLHttp.status == 200) {
    document.getElementById("qrCode").innerHTML = "";
     document.getElementById("qrCode").innerHTML = XMLHttp.responseText;
   }
	else {
		document.getElementById("qrCode").innerHTML = "";
     alert("Houve um problema ao obter os dados:\n" + XMLHttp.statusText);
   }
 }
}

 

Este é o código HTML:

 

<textarea name="txt" onkeydown="Ajax(this.value);"></textarea>
<div id="qrCode"></div>

 

O problema é: como vou retornar e imprimir essa imagem na página?

Ele retorna uma imagem png, e se mando dar um innerHTML ele pega o "código fonte" da imagem e imprime na página.

Alguém sabe como resolvo isso?

Agradeço desde já.

[William Bruno 1501]

você precisa colocar dentro do src de uma tag img. Entendeu ?

[Wendel Rodrigues 0]

mas dentro do src eu coloco o endereço para a imagem, neste caso o php me gera a imagem e atravéz do ajax eu tenho que imprimir isso na página.

[William Bruno 1501]

Eu sugeri isso aqui:

 

 document.getElementById("qrCode").innerHTML = '<img src="'+XMLHttp.responseText+'" />';

você testou ?

[Dii 15]

Coloca isso:

 

 document.getElementById("qrCode").innerHTML = XMLHttp.responseText;

 

Porque pelo que eu entendi, o PHP já gera a imagem pra você, então dê um innerHTML com o resultado vindo por AJAX e pronto.

 

;)

[Wendel Rodrigues 0]

Coloca isso:

 

 document.getElementById("qrCode").innerHTML = XMLHttp.responseText;

 

Porque pelo que eu entendi, o PHP já gera a imagem pra você, então dê um innerHTML com o resultado vindo por AJAX e pronto.

 

;)

 

Se você olhou meu código vai perceber que é exatamente isso que eu fiz, mas não deu certo.

 

Pessoal não dá certo tmb imprimindo no src, segue o link do código rodando:

 

http://wendel.xp3.biz/QRCode/

[Dii 15]

Cara...

De um var_dump na sua função de saída $qr->makeCode($txt, $options) e vê o que ela retorna.

Porque pelo que eu vi, está retornando um valor não escapado, arriscaria utilizar unescape() no output e no input um escape().

 

Assim:

 

...
Caminho = "QRCode.php?txt="+escape(txt);
...

 

e na saída:

 

document.getElementById("qrCode").innerHTML = unescape(XMLHttp.responseText);

 

Mas a princípio dê um var_dump e veja o resultado que volta. ;)

[Wendel Rodrigues 0]

Pessoal segue o link para baixar o código completo, se puderem olhar. Não está funcionando. Talvez vendo o código completo vcs possam entender melhor.

 

Baixar QRCode.rar

[Dii 15]

Olha.

Eu não consegui de jeito algum passar por AJAX.

 

Se você acessar

QRCode.php?txt=asdioasdiasio

ele da a imagem direitinho, mas via AJAX ele zica tudo o_o

[Wendel Rodrigues 0]

Olha.

Eu não consegui de jeito algum passar por AJAX.

 

Se você acessar

QRCode.php?txt=asdioasdiasio

ele da a imagem direitinho, mas via AJAX ele zica tudo o_o

 

Pois é, o meu problema é retornar essa imagem com Ajax. :(

Eu poderia converter essa imagem para base64, mas tmb não consegui. Você sabe como fazer nesse caso ai e retornar o código base64?

 

Rapaz, resolvi o trem sem Ajax, kkkkkk

As vezes a gente escolhe o caminho mais dificil sendo que existe um mais fácil e eficiente. hehe

Olha como eu resolvi:

 

<script type="text/javascript">
 function Ajax(txt){
   document.getElementById("qrCode").src = "QRCode.php?txt="+txt;
 }
</script>
<textarea name="txt" onkeydown="Ajax(this.value);"></textarea>
<img src="QRCode.php?txt=QRCode" id="qrCode" />