使用来自 ajax 请求的原始数据作为背景图像答案

【问题标题】：Use raw data from ajax request as background image使用来自 ajax 请求的原始数据作为背景图像
【发布时间】：2015-10-22 08:29:28
【问题描述】：

我在我的 php 页面的 head 部分使用以下代码来加载图像：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        console.log(this.response, typeof this.response);
        var img = document.getElementById('gallery_image');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', '/img/loading.gif');
xhr.responseType = 'blob';
xhr.send();

这行得通。但是，我现在要做的是将图像设置为背景图像。我试图换行

img.src = url.createObjectURL(this.response);

进入

img.style.background.src = url.createObjectURL(this.response);

但这不起作用。那我应该怎么做呢？

【问题讨论】：

更新了我的回答
已将我的缓存功能添加到我的帖子中，暂时退出排序。但希望这也将是有用的..

标签： php jquery html css ajax

【解决方案1】：

你也考虑过base64吗？比如Display PNG image as response to jQuery AJAX request

在 PHP 上：

<?php
    $img = file_get_contents('someimage.png');
    $imb64 = base64_encode($img);  
    header('Content-Type: image/png');
    echo $imb64;
    exit;
?>

在 Javascript 上：

    $.ajax({
        type: "POST",
        url:'myimage.php',
        contentType: "image/png",
        data: {},
        success: function(data){
            $('#myimage').css('background-image', 'url(' + 'data:image/png;base64,' + data+ ')');

        }
    });

当然你需要改变上面的，它只是一个简单的例子。？未在编写/修改为基本基础时进行测试

当然你不需要使用jquery，这只是为了缩短例子..你应该可以使用你的xhr

资源：

https://en.wikipedia.org/wiki/Data_URI_scheme

https://css-tricks.com/data-uris/

此方法非常方便，允许您控制热链接并显示丢失文件的占位符以及使用电子标签控制缓存的能力...

---------我感觉很好-------------

    function cacheByModified($file) {
        if ($GLOBALS['VTIS']['cache']!==false) {
            $ts = filemtime($file);
            $gmt_mtime = gmdate('r', $ts);
            header('ETag: "'.md5($ts.$file).'"');
            header('Last-Modified: '.$gmt_mtime);
            header('Cache-Control: public');
            // IF HAS HEADERS
            if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) || isset($_SERVER['HTTP_IF_NONE_MATCH'])) {
                if ($_SERVER['HTTP_IF_MODIFIED_SINCE'] == $gmt_mtime || str_replace('"', '', stripslashes($_SERVER['HTTP_IF_NONE_MATCH'])) == md5($ts.$file)) {
                    header('HTTP/1.1 304 Not Modified');
                    if (extension_loaded("zlib") && (ini_get("output_handler") != "ob_gzhandler")) {
                        ini_set("zlib.output_compression", 1);
                    }   
                    exit;
                }
            }
        }
    }


    // Cacher.. send normal headers, check if found.. if are.. return 304 and exit.
    cacheByModified("filename.ext or some other unique id here per file..");

    // Enable gzip before sending the file
    if (extension_loaded("zlib") && (ini_get("output_handler") != "ob_gzhandler")) {
        ini_set("zlib.output_compression", 1);
    }

    // Obtain the file itself
    $img = file_get_contents('someimage.png');
    $imb64 = base64_encode($img);  

    // Send main header and output
    header('Content-Type: image/png']);
    echo $imb64;
    exit;

上面/附加的代码是我缓存功能的快速提取，我没有在项目之外对其进行测试，因为只是快速执行此操作。但如果我没记错的话应该可以工作。

【讨论】：

这里的问题是我要这样设置背景图片，而不是图片本身
没问题，CSS背景可以使用Data URI's
我明白了。我对其进行了测试，原则上它似乎可以工作，我只是缺少数据有效负载
只是一个简短的例子，所以我根据需要添加了 echo 和 headers。
哇，好用！伟大的。不幸的是，我现在不能投票。但是当我有更多的声誉时，我会回来。

【解决方案2】：

我认为下面的 js 代码会帮助你而不是你所拥有的：

img.style.backgroundImage = url.createObjectURL(this.response);

您还可以查看它的文档here。

【讨论】：