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

Question

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

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？ 例如， 显示PNG图片作为对jQuery AJAX请求的响应

在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://zh.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);

您也可以在此处查看其文档。