изменить фоновое изображение на другое, созданное динамически с помощью сценария вызова ajax

Я ищу способ избежать хранения изображений при использовании функции GD ImagePng, но использовать изображение, созданное для изменения свойства background-image на элементе.

Я написал ajax-вызов скрипта php, который создает изображение, и, когда это будет сделано, я хочу использовать ответ как образ для установки в качестве фона для элемента.

Моя проблема заключается в том, что новое созданное изображение не отображается, но с firebug я вижу ответ как кусок байтов.

Возможно ли, чего я пытаюсь достичь? или я должен сохранить изображение и использовать его ссылку, обязательно?

Вот основная часть кода:

Ajax call:

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; . ... ... 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 background-image в URL-адрес запроса GET, а не вообще с помощью AJAX.