PHP BaseEncode Wordpress Images

Question

Overall, trying to prevent people from stealing images, and prevent A.I. from scanning images that are already watermarked.

Trying to understand how a wordpress themes handle all images (png, jpeg, gif, svg and possibly .mov). Some Images are in Media Library, while others aren't.
I'm using wordpress, php renders html and I'm not sure how or what syntax I use to target the document before it renders as HTML. Wordpress has a 4-digit number for each page that is uses to reference that page with a database. I have 200+ images used on numerous wordpress pages so I'm trying to not manually reference each image and store the encoded image data in a mySQL database, but if necessary am willing to decrease loading time.
I'm starting with 5. encoding images / URL and storing the img src as: <img src="data:image/png;base64 .....">, the php code I'm working with needs a .html.
This is a standard image used on a page, I'm trying to understand how to encode the contents of that URL and store the encoded image data as the src.

<figure>
<figcaption>blah</figcaption>
<img class="img-responsive" alt="blah" src="https://websitename.com/wp-content/uploads/a34908acg/filename.png"></figure>

Just to save time and prevent unnecessary responses from an educated audience, this is an outline:

Converting the image to binary data: The first step in encrypting an image is to convert it into binary data that can be processed by the encryption algorithm.
Applying the encryption algorithm: Once the image has been converted to binary data, it can be encrypted using a suitable encryption algorithm.
Generating the encryption key: To encrypt and decrypt the image
Decrypting the image:
Displaying the decrypted image: Once the image has been decrypted, it can be displayed in the browser using JavaScript methods such as the Canvas API or the HTML img tag.

This is number 5's sub-steps

Load the HTML file into memory
Parse the HTML document using an HTML parser
Find all img tags within the HTML document
Iterate through each img tag and extract the src attribute value
Read the contents of the src image file into memory
Encode the image data in base64 format using a base64 encoder
Replace the original src attribute value with the base64-encoded image data
Save the updated HTML document to a new file or overwrite the original file.
By following these steps, you can automatically identify all img tags in an HTML file and apply the base64 encoding function to their src contents.

I've read this post which is inline with my goal. https://stackoverflow.com/questions/3967515/how-to-convert-an-image-to-base64-encoding

<?php

// =============================================================================
// PAGE.PHP
// -----------------------------------------------------------------------------
// Handles output of individual pages.
//
// Content is output based on which Stack has been selected in the Customizer.
// To view and/or edit the markup of your Stack's pages, first go to "views"
// inside the "framework" subdirectory. Once inside, find your Stack's folder
// and look for a file called "wp-page.php," where you'll be able to find the
// appropriate output.
// =============================================================================

x_get_view( x_get_stack(), 'wp', 'page' );

// =============================================================================

I tried to using 'page' as the .html within:

// Load the HTML file into memory
const xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/file.html', true);
xhr.onload = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const html = xhr.responseText;
    // Parse the HTML document using an HTML parser
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    // Find all img tags within the HTML document
    const images = doc.querySelectorAll('img');
    // Iterate through each img tag and extract the src attribute value
    images.forEach(image => {
      const src = image.getAttribute('src');
      if (src && src.startsWith('https://website.com/wp-content/uploads')) {
        // Read the contents of the src image file into memory
        const xhr = new XMLHttpRequest();
        xhr.open('GET', src, true);
        xhr.responseType = 'blob';
        xhr.onload = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
            const blob = xhr.response;
            const reader = new FileReader();
            reader.onloadend = function() {
              // Encode the image data in base64 format using a base64 encoder
              const encoded = btoa(reader.result);
              // Replace the original src attribute value with the base64-encoded image data
              image.setAttribute('src', 'data:image/png;base64,' + encoded);
              // Save the updated HTML document to a new file or overwrite the original file
              const updatedHtml = doc.documentElement.outerHTML;
              const xhr = new XMLHttpRequest();
              xhr.open('PUT', 'path/to/file.html', true);
              xhr.setRequestHeader('Content-Type', 'text/html');
              xhr.send(updatedHtml);
            };
            reader.readAsBinaryString(blob);
          }
        };
        xhr.send();
      }
    });
  }
};
xhr.send();

PHP BaseEncode Wordpress Images

0 Answers0