본문으로 건너뛰기

이미지 리사이즈

· 약 2분
<!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:resize

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

여담

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