2010-10-31 44 views
1

Je suis la récupération d'une image captcha du package Java basé « SimpleCaptcha »captcha image qui revient une donnée binaire? Comment afficher ceci?

À l'avant, je viens de mettre ce qui suit dans ma page et je reçois une image captcha:

<img src="stickyImg" /> 

Je veux recharger cette image captcha onclick en utilisant javascript.

J'ai essayé:

$("#theclickhandler").click(function(){ 
    $("#stickyImg").load('stickyImg', function(response){   
     $("#stickyImg").attr('src', response); 
    }); 
    return false; 
}); 

Cela a l'image, mais émet quelque chose comme ceci (grandement raccourci évidemment):

<img src="captcha image�PNG �ݚ��L�23U�݆�}$�J����Dy����IEND�B`� "> 

Cela ressemble à des données brutes, binaires pour moi. Comment puis-je faire fonctionner ceci?

Répondre

2

L'attribut src d'une balise d'image indique au navigateur où l'image est de charger, pas le contenu de l'image. Donc, vous bourrez le contenu de l'image dans l'endroit où vous voulez que l'emplacement soit, et cela vous donne des déchets parce que cela n'a tout simplement pas de sens. Donc, pour recharger l'image, vous devez indiquer au navigateur que l'adresse de l'image a changé. Il ne suffit pas de réécrire simplement l'emplacement dans l'attribut src de l'image à la même adresse - cela n'indiquera au navigateur de rien changer. Vous pouvez surmonter cela en introduisant des données aléatoires dans la chaîne de requête, par exemple l'heure de la requête. Comme @mikerobi suggère, vous pouvez simplement réécrire l'étiquette src, ici avec la modification de mettre un horodatage dans la chaîne de requête (que votre servlet ignore presque sûrement):

$('#stickyImg').attr('src', 'stickyImg?' + (new Date().getTime())); 
+0

Fascinant! Je n'en avais aucune idée. Cela fonctionne parfaitement même si c'est proche de la magie pour moi. Merci d'expliquer le "pourquoi" derrière cela. – Lothar

1

Vous ne pouvez pas utiliser cette approche pour charger des images, vous devez définir l'attribut image url sur le chemin du générateur d'image.

$('#stickImg').attr('src', 'path/to/image/generator'); 
+0

Eh bien, dans le code HTML en utilisant (juste comme ça) charge l'image. Donc j'ai pensé que pour le recharger, je devrais utiliser cette méthode de chargement (dans mon exemple) pour saisir la même chose, "stickyImg". Je ne connais rien à Java alors comment puis-je trouver le chemin vers le générateur d'image et, plus confusément pour moi, pourquoi fonctionne lorsque la page se charge, mais pas quand je l'appelle comme je le fais dans ma méthode de chargement? Pardonnez-moi, je suis un gars de l'avant qui n'a jamais touché java dans ma vie. – Lothar

+0

Cela ne suffit pas, si le chemin ne change pas, vous devez ajouter quelque chose supplémentaire sur l'URL. –

0

Je ne sais pas combien de navigateurs support, mais il est possible de coder en base64 une image, préfixer avec (en fonction du format de l'image) "données: image/png; base64,", et l'utiliser comme une URI pour l'image.