Replace file in directory with PHP

Question

I'm using html2canvas to save a div as an image in my directory. This div has dynamic information that is defined through a form. I have a button that when clicked runs the function and saves the image as div-saved.jpeg. So far so good, the image is saved.

The problem is that several times a day I need to change this information and save it with the same name (because this image is displayed on another page), but after three changes the image stops being replaced in the directory and I need to delete it manually to get it working again.

Here are the codes:

script:

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);
            }
        };
    });
}

save-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";

Does anyone know what may be happening?

Answer 1

If the problem is indeed about caching the image (see my comment - it's how browsers work), then you can one of these options:

a. If your server runs Apache, disable caching from .htaccess (for a specific folder or for specific files). (See SO answer here) Ex.:

<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. You can trick the browser to reload the image, by adding a parameter in the image request:

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

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

b2. Using the above trick, you can store in a file the "version" of the image (i.e. the date when it was last modified) or read filemtime(), and use that as a parameter:

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

c. Or you can read the image with php, instead of serving it as usual:

<img src="image.php" />

Then in image.php:

<?php

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

readfile($image);
exit;

?>