Answer #1:
- Add tag with
<img id="capcha" src="../php/captcha.php" height="30" width="300"/>
your.CaptchaImg
container. Use reload handler for capcha load like this:
$.CaptchaLoad = function(){ var src = '../php/captcha.php', stamp = (new Date()).getTime(), url = src + '?' + stamp; document.getElementById('capcha').src = url; };
Useful link: Refresh image with a new one at the same url.
Answer #2:
You may use another parameters to change font size. For example add GET
-parameter to image load script. Then capture it on server and react while you rendering capcha image.
Client-side:
$.CaptchaLoad = function(){
var src = '../php/captcha.php',
stamp = (new Date()).getTime(),
font = 15, // or get it from somewhere else
url = src + '?stamp=' + stamp + '&font=' + font,
img = document.getElementById('capcha');
img.src = url;
img.className = 'capcha-loading';
img.onload = function(){ this.className = ''; };
img.onerror = function(){ this.className = 'capcha-error'; };
};
Server-side:
$font = isset($_GET['font']) ? abs((int)$_GET['font']) : 15;
// ^ ^
// asked font size default
// ... render image using obtained font size
P.S.: Also, you have forgot to use imagedestroy($im);
in the end of PHP script.