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

Javascript 将背景图像更改为另一个由ajax调用脚本动态创建的图像,javascript,php,Javascript,Php,我正在寻找在使用GD函数ImagePng时避免图像存储的方法,但是使用image created来更改元素的背景图像属性 我已经为创建图像的php脚本编写了一个ajax调用,完成后,我希望使用响应作为图像,将其设置为元素的背景 我的问题是没有显示新创建的图像,但使用firebug,我可以将响应视为一个字节块 可能吗?我想达到什么目的?或 我必须存储图像并使用其引用,必须吗 以下是代码的主要部分: Ajax调用: jQuery.ajax({ type: 'POST'

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

我已经为创建图像的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(“'.$dstmagename')

在ajax调用中完成设置后,它可以工作:

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

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

有几种解决方案

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

我不认为将二进制数据传递给元素样式标记会起作用吗?如果您取消对base64函数的注释并传递base64,请确保在字符串开头添加
图像/png
内容等,以及它为什么起作用?首先,我尝试了……或者我做错了什么?您可以在代码处看到注释行,在在这种情况下,我使用data:image/png;basa64,“+html来设置背景图像。此外,我还遇到了uri过长的问题(解决了更改apache指令的问题)结果是一样的。没有显示图像,用firebug看到代码块,我会尝试第二个解决方案,但我想我会陷入uri太长太抱歉,第一个解决方案,一旦我解决uri太长,我想,我得到了forbidden@manou-第二种解决方案不会导致URI过长的问题,因为css类似于***background image:url('/getimage?a=1&b=2&c=3');***。对于第一种解决方案,浏览器倾向于限制数据URI的大小,因此如果生成的背景图像太大(<~32K)它可能无法用作数据URI。对于背景平铺的小型简单图像,它可以正常工作。您可以通过将数据URI复制并粘贴到浏览器的URL栏来测试这一点。