将背景图像更改为另一个由ajax调用脚本动态创建的图像


change background-image to other one created dynamically by ajax call script

我正在寻找在使用GD函数ImagePng时避免图像存储的方法,但使用创建的图像来更改元素的背景图像属性。

我已经为创建图像的php脚本编写了一个ajax调用,完成后,我想使用响应作为图像,将其设置为元素的背景。

我的问题是新创建的图像没有显示,但使用firebug,我可以将响应视为一块字节。

我想达到的目标有可能吗?或我必须存储图像并使用它的引用,强制?

以下是代码的主要部分:

Ajax调用:

    jQuery.ajax({
            type: 'POST',
            url: '/renderscooter',
            proccessData: false,
            data: { img: imgSrc, deimg: imgDe, newimg: img}
        })
        .done(function( html ) {
//            jQuery('#content_illu').css('background-image', html);
//            jQuery('#content_illu').css('background-image', 'url('+html+')');
//            jQuery('#content_illu').css('background-image', 'data:image/png;basa64,'+html);
            jQuery('#content_illu').css('background-image', 'data:image/png;'+html);
            jQuery('#content_illu').css('background-size','auto 737px');
        });

PHP控制器:

...
... creation image process 
...
    ob_start();
    //ImagePng($imgPng, $dstImagePathName);
    ImagePng($imgPng);
    ImageDestroy($imgPng);
    $imageData = ob_get_clean();
    $response = $this->getResponse();
    $response
    ->getHeaders()
    ->addHeaderLine('Content-Transfer-Encoding', 'binary')
    //->addHeaderLine('Content-Type', 'image/png')
    ->addHeaderLine('Content-Length', mb_strlen($imageData));
    //$response->setContent('url("'.$dstImageName.'")');
    //$response->setContent(base64_encode($imageData));
    $response->setContent($imageData);
    return $response;

注意:如果我存储图像并返回字符串:$response->setContent('url("'.$dstImageName.'")');

在ajax调用完成后,它可以进行设置:

jQuery('#content_illu').css('background-image', html);

但由于需要,可能无法将映像写入磁盘。

有几个解决方案。

  • 以字符串形式返回base64编码的图像(确保也使用正确的内容长度
  • 使用GET请求而不是POST请求,只需将后台图像css属性设置为GET请求url,而不是使用AJAX