본문으로 건너뛰기

이미지 리사이즈

· 약 2분
Eunkwang Shin
Eunkwang Shin
Owner

CSS로 리사이즈​

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Answer</title>
    <style>
      .resizable {
        resize: both;
        border: 2px solid blue;
        overflow: hidden;
        position: relative;
      }

      .resizable::after {
        position: absolute;
        display: block;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        background-color: blue;
        content: "";
        cursor: nwse-resize;
      }
    </style>
  </head>
  <body>
    <h1>Answer</h1>
    <form name="image">
      <input type="text" name="src" value="./example.jpg" />
      <button type="submit">불러오기</button>
    </form>
    <script>
      const MAX_WIDTH = 800;
      const MIN_WIDTH = 300;

      const generateRandomId = () => btoa(Math.random()).substr(0, 12);
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          const wrap = mutation.target;
          switch (mutation.attributeName) {
            case "style": {
              let nextWidth = parseInt(wrap.style.width);
              if (nextWidth > MAX_WIDTH) {
                nextWidth = MAX_WIDTH;
              } else if (nextWidth < MIN_WIDTH) {
                nextWidth = MIN_WIDTH;
              }

              wrap.style.width = `${nextWidth}px`;
              wrap.style.height = `${nextWidth / wrap.dataset.ratio}px`;
            }
          }
        });
      });

      const loadImage = (src) => {
        const id = generateRandomId();
        const img = new Image();
        img.src = `${src}?v=${id}`;
        img.id = id;
        img.onload = (event) => {
          const _img = document.getElementById(id);
          const _wrap = _img.parentElement;
          const { width, height } = _img.getBoundingClientRect();

          _wrap.style.width = `${width}px`;
          _wrap.style.height = `${height}px`;
          _wrap.dataset.ratio = String((width / height).toFixed(2));
          _img.style.width = "100%";
          _img.style.height = "100%";
        };

        const wrap = document.createElement("div");
        wrap.classList.add("resizable");
        wrap.appendChild(img);
        document.body.appendChild(wrap);
        observer.observe(wrap, {
          attributes: true,
        });
      };

      document.forms.image.addEventListener("submit", (event) => {
        event.preventDefault();

        const src = event.target.src.value;
        if (src) {
          loadImage(src);
        }
      });
    </script>
  </body>
</html>

JS로 리사이즈​

  • 시간될 때 구현해보자.
  • handler 를 만들고, nw, ne, sw, se 방향에 childNode를 각각 만들고 after content 로 영역을 생성해야한다.

여담​

  • 컴포넌트의 기본 단위라고 생각되는 것들에 대해 vanilla 로 스니펫을 많이 만들어봐야될 것 같다.
  • react-movable React 와 여러 Util Class 를 사용하여 Commits on Aug 12, 2019 부터 만든 것 같은데, 90m 안에 가능했던걸까.