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?

How do you know that "after three changes the image stops being replaced"? If you are checking the image in the browser, than it is very possible that the image is *cached*. So even if the file is changed on the server, the browser will show a cached image. Can you check this? (clear cache, then reload page) — verjas, Sep 13 '20 at 20:38
@verjas After a few observations, I think the problem is actually in the cache. Do you know of any way to resolve this like add a cachebreaker when the image is updated? — Raphael, Sep 13 '20 at 22:08

score 0 · Accepted Answer · answered Sep 14 '20 at 06:00

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;

?>

Really useful. Thank you so much. – Raphael Sep 15 '20 at 01:11 — Raphael, Sep 15 '20 at 01:11

Replace file in directory with PHP

1 Answers1