FullScreen/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
        aliquam, dolore quisquam sunt minus totam eaque aut odio voluptatem.
        Corporis nemo culpa illum laboriosam aut repellendus sint assumenda
        reprehenderit doloribus.
      </p>

      <button id="toogle">toogle</button>
      <button id="enter">enter</button>
      <button id="exit">exit</button>
      <input id="file" type="file">
    </div>

    <script type="module">
      import FullScreen from "./index.js";
      import compressImage from '../compressImage/compressImage.js'
      document.querySelector('#file').addEventListener('change', async (e) => {
        const file = e.target.files[0]
        const blob = await compressImage(file,1080,1080,2,0.92)
        console.log(blob,'blob')
        console.log('size',blob.size / 1024 / 1024)
        const img = document.createElement('img')
        img.src = URL.createObjectURL(blob)
        document.body.appendChild(img)
      })
      const content = document.querySelector(".content");
      const toogle = document.querySelector("#toogle");
      const enter = document.querySelector("#enter");
      const exit = document.querySelector("#exit");

      const fullScreen = new FullScreen(content);

      toogle.addEventListener("click", () => {
        fullScreen.toogle();
      });

      enter.addEventListener("click", () => {
        fullScreen.enter();
      });

      exit.addEventListener("click", () => {
        fullScreen.exit();
      });
    </script>
  </body>
</html>