Question

我在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);

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

Answer 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;

以上/附加的代码是我的缓存功能的快速摘录，我没有在项目的一侧测试它只是这样做很快..但是如果我没有弄错的话应该工作。

Answer 2

我认为以下js代码将帮助您而不是您拥有的内容：

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

另外，您可以看到它的文档https://github.com/bettiolo/oauth-signature-js/blob/master/src/app/oauth-signature.js。

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

2 个答案: