← Back

Four Corners embed

The Four Corners Project allows specific information to be embedded in each of the photograph’s four corners, where it is available for an interested reader to explore. This increased contextualization strengthens both the authorship of the photographer and the credibility of the image.

fourcorners.js is used to apply the Four Corners UI to images. The metadata for the UI can be pulled out of C2PA v0.8 metadata embedded inside the image.

The documentation for getting this to work is not easily available, the README is outdated. Full documentation for C2PA v0.8 use is provided here.

Usage

The source code of this page should provide a reasonable example, but I will repeat a minimal version here. Here are the steps:

  1. Add the fourcorners CSS and JS to the <head> of your page.
  2. Wrap your img tags in a div with the fc-embed class. A different class name could be used, but this is the class fourcorners.js will apply, so using it already will prevent a flash of styling change.
  3. Add JavaScript that targets all the fc-embed containers and applies FourCorners to them.

Combined, you can get a minimal page like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@four-corners/fourcorners.js@0.9.5/dist/fourcorners.min.css"
  />
  <script src="https://cdn.jsdelivr.net/npm/@four-corners/fourcorners.js@0.9.5/dist/fourcorners.min.js"></script>
  <script type="text/javascript">
    window.addEventListener("load", function () {
      const embeds = document.querySelectorAll(".fc-embed");
      embeds.forEach((embed) => {
        const inst = new FourCorners({
          container: embed,
          caption: true,
          credit: true,
          logo: true,
          dark: false,
          wasmSrc:
            "https://cdn.jsdelivr.net/npm/@contentauth/sdk@0.8.12-alpha.10/dist/assets/wasm/toolkit_bg.wasm",
          workerSrc:
            "https://cdn.jsdelivr.net/npm/@contentauth/sdk@0.8.12-alpha.10/dist/cai-sdk.worker.min.js",
        });
      });
    });
  </script>
</head>
<body>
  <div class="fc-embed">
    <img src="my_img.jpg" />
  </div>
</body>
</html>

The wasmSrc and workerSrc URLs should not change, as these old libraries are not being updated anymore. The fourcorners.js version used in example is 0.9.5, the latest at time of writing. That could potentially be updated in the future, but there's no guarantee future versions will also work with this code.

Examples