.html to show most recent image-CodePudding

What I have: A .html on a computer in my local network at work, without a web server. The index.html is therefore accessed through file:// and not http://.

What I want: A .html that shows the most recent image in a folder and automatically refreshes. I have a program taking screenshots every X seconds and saving them as "NameHHMMSS.jpg".

Is this possible without Web Server, PHP installations and so on? Thank you in advance!

CodePudding user response：

You can create a function to dynamically generate the filename and load the image. Then you can use setTimeout to call the function from within itself at a desired interval.

Here is a quick test (Notice the image name changes every 5 seconds):

function generateImagePath() {
  // Replace this logic with your code to generate the path for your image
  let basePath = "../images/";

  let date = new Date();

  var randomColor = Math.floor(Math.random() * 16777215).toString(16);

  let imageName = "Name"   date.getHours()   date.getMinutes()   date.getSeconds();

  // This is just to get a sample image (this will be the path of your image)
  let imageUrl = "https://via.placeholder.com/200/"   randomColor   "/fff?text="   imageName   ".jpg";


  return imageUrl;
}

// Function that loads/changes an image every 5 seconds
function loadImage() {

  let imageUrl = generateImagePath();

  document.getElementById("imageDiv").src = imageUrl;

  setTimeout(loadImage, 5000); // Change duration here
}

// Assign the function to be called when the page has loaded
window.addEventListener('DOMContentLoaded', (event) => {
  loadImage();
});

<body>
  <img id="imageDiv" src="#" />
</body>

CodePudding user response：

It is possible to create an HTML file that displays the most recent image in a folder without using a web server or PHP installations. This can be done using JavaScript to dynamically update the HTML file and display the most recent image.

Here is an example of how you can achieve this:

Create a folder on your computer where the screenshots will be saved.

In the HTML file, add a tag where the image will be displayed.

<html>
    <head>
        <title>Most Recent Image</title>
    </head>
    <body>
        <h1>Most Recent Image</h1>
        <img id="screenshot" src="" alt="Screenshot">
    </body>
</html>

In the same HTML file, add a <script> tag to include some JavaScript code that will update the src attribute of the <img> tag with the most recent image.

<html>
  <head>
    <title>Most Recent Image</title>
  </head>
<body>
  <h1>Most Recent Image</h1>
  <img id="screenshot" src="" alt="Screenshot">
  <script>
      function updateImage() {
          // Get the list of files in the folder
          var files = // Code to get the list of files in the folder

          // Sort the list of files by their last modified time
          files.sort(function(a, b) {
              return b.lastModified - a.lastModified;
          });

          // Get the most recent image file
          var mostRecentImageFile = files[0];

          // Update the src attribute of the img tag with the most recent image
          document.getElementById("screenshot").src = mostRecentImageFile.name;
      }

      // Call the updateImage function every 5 seconds to update the image
      setInterval(updateImage, 5000);
  </script>
</body>

Save the HTML file and open it in a web browser using the file:// protocol. The image should automatically update every 5 seconds to show the most recent image in the folder.

Note that this solution relies on the web browser's ability to access the files in the local folder. This may not work in all web browsers and may require some additional configuration. Additionally, this solution does not provide a way for the HTML file to automatically refresh itself, so you would need to manually refresh the page to see the updated image.