将目录中的文件替换为 PHP

Question

我正在使用 html2canvas 将 div 作为图像保存在我的目录中。 div 具有通过表单定义的动态信息。我有一个按钮，单击该按钮会运行该功能并将图像保存为 div-saved.jpeg。到目前为止一切顺利，图像已保存。

问题是我每天需要多次更改此信息并以相同的名称保存它（因为此图像显示在另一个页面上），但是更改三次后图像停止在目录中被替换并且我需要手动删除它才能让它重新工作。

代码如下：

脚本：

function doCapture() {
    window.scrollTo(0, 0);

    html2canvas(document.getElementById("div-to-save")).then(function (canvas) {

        var ajax = new XMLHttpRequest();
        ajax.open("POST", "save-capture.php", true);
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajax.send("image=" + canvas.toDataURL("image/jpeg", 0.9));

        ajax.onreadystatechange = function () {

            if (this.readyState == 4 && this.status == 200) {

                console.log(this.responseText);
            }
        };
    });
}

保存-capture.php:

<?php
    $image = $_POST["image"];
    $image = explode(";", $image)[1];
    $image = explode(",", $image)[1];
    $image = str_replace(" ", "+", $image);
    $image = base64_decode($image);
    file_put_contents("div-saved.jpeg", $image);

    echo "Done";

有人知道会发生什么吗？

Answer 1

如果问题确实与缓存图像有关（请参阅我的评论 - 这就是浏览器的工作方式），那么您可以选择以下选项之一：

一个。如果您的服务器运行 Apache，请禁用 .htaccess 的缓存（针对特定文件夹或特定文件）。 (See SO answer here) 例如：

<FilesMatch "div-saved\.jpeg$">
    <IfModule mod_expires.c>
        ExpiresActive Off
    </IfModule>
    <IfModule mod_headers.c>
        FileETag None
        Header unset ETag
        Header unset Pragma
        Header unset Cache-Control
        Header unset Last-Modified
        Header set Pragma "no-cache"
        Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
        Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
    </IfModule>
</FilesMatch>

b。您可以欺骗浏览器重新加载图像，方法是在图像请求中添加一个参数：

<!-- cached image: -->
<img src="div-saved.jpeg" />

<!-- never cached image -->
<img src="div-saved.jpeg?v=<?php echo time(); ?>" />

b2。使用上述技巧，您可以在文件中存储图像的“版本”（即上次修改的日期）或读取 filemtime()，并将其用作参数：

<?php
$image = "div-saved.jpeg";
$vers = filemtime($image); // get last modified
?>
<img src="div-saved.jpeg?v=<?php echo $vers; ?>" />

c。或者您可以读取使用 php 的图像，而不是像往常一样提供它：

<img src="image.php" />

然后在image.php:

<?php

$image = 'div-saved.jpeg';
header('Content-Disposition: inline');
header('Content-type: image/jpeg');

readfile($image);
exit;

?>

将目录中的文件替换为 PHP

Replace file in directory with PHP

php

directory

html2canvas