Zend Framework 2：Invisible Captcha

I have a little problem generate captcha in ZF2

Here is my Controller:

public function indexAction()
{
    $form = new RegisterForm();

    return array('form' => $form);
}

RegisterForm class:

    public function __construct($name = null)
    {
        $this->url = $name;
        parent::__construct('register');
        $this->setAttributes(array(
            'method' => 'post'
        ));

        $this->add(array(
            'name' => 'password',
            'attributes' => array(
                'type'  => 'password',
                'id' => 'password'
            )
        ));
        $this->get('password')->setLabel('Password: ');

        $captcha = new Captcha\Image();
        $captcha->setFont('./data/captcha/font/arial.ttf');
        $captcha->setImgDir('./data/captcha');
        $captcha->setImgUrl('./data/captcha');



        $this->add(array(
            'type' => 'Zend\Form\Element\Captcha',
            'name' => 'captcha',
            'options' => array(
                'label' => 'Captcha',
                'captcha' => $captcha,
            ),
        ));

        $this->add(array(
            'name' => 'submit',
            'attributes' => array(
                'type'  => 'button',
                'value' => 'Register',
            ),
        ));
}

View: index.phtml:

...
<div class="group">
    <?php echo $this->formlabel($form->get('captcha')); ?>
    <div class="control-group">
        <?php echo $this->formElementErrors($form->get('captcha')) ?>
        <?php echo $this->formCaptcha($form->get('captcha')); ?>
    </div>
</div>
...

Above code generate png images in data/captcha folder, but i can't generate them in view. FireBug shows img element and url, but url to image seems to be empty. Thanks for any help.

You have to set the img url correctly and define the route in your module.config.php

Controller

public function indexAction()
{
    $form = new RegisterForm($this->getRequest()->getBaseUrl().'test/captcha');

    return array('form' => $form);
}

remember to change the test/captcha to your own base url

in your registerForm class

public function __construct($name)
{
    //everything remain the same, just change the below statement
    $captcha->setImgUrl($name);
}

add this to your module.config.php, as your main route child

                            'may_terminate' => true,
                            'child_routes' => array(
                                'registerCaptcha' => array(
                                    'type'    => 'segment',
                                    'options' => array(
                                        'route'    => '/[:action[/]]',
                                         'constraints' => array(
                                            'action' => '[a-zA-Z][a-zA-Z0-9_-]*',
                                        ),
                                            'defaults' => array(
                                                'action' => 'register',                     
                                            ),
                                    ),
                                ),

                                'captchaImage' => array(
                                    'type'    => 'segment',
                                    'options' => array(
                                        'route'    =>  '/captcha/[:id]',
                                         'constraints' => array(
                                            'action' => '[a-zA-Z][a-zA-Z0-9_-]*',
                                        ),
                                        'defaults' => array(
                                            'controller' => 'controller',
                                            'action'     => 'generate',
                                         ),
                                    ),
                                ),
                            ),

remember to change the controller under captcha image, the action generate is actually generating the captcha image file

add this to your controller file as well

public function generateAction()
{
    $response = $this->getResponse();
    $response->getHeaders()->addHeaderLine('Content-Type', "image/png");

    $id = $this->params('id', false);

    if ($id) {

        $image = './data/captcha/' . $id;

        if (file_exists($image) !== false) {
            $imagegetcontent = @file_get_contents($image);

            $response->setStatusCode(200);
            $response->setContent($imagegetcontent);

            if (file_exists($image) == true) {
                unlink($image);
            }
        }

    }

    return $response;
}

with these, it should be working fine