BOM을 사용하여 브라우저의 이미지 조작하기

13 Oct 2023

웹 브라우저에서 이미지를 조작하는 것은 사용자에게 동적인 경험을 제공하기 위해 중요한 요소입니다. BOM(Browser Object Model)은 자바스크립트를 사용하여 브라우저 창에 접근하고 조작할 수 있는 API를 제공합니다. 이를 사용하여 브라우저의 이미지를 조작하는 방법에 대해 알아보겠습니다.

1. 이미지 로딩하기

<div>
  <img id="myImage" src="default-image.jpg" alt="default image" />
  <button onclick="loadImage()">Load Image</button>
</div>

<script>
function loadImage() {
  var img = document.getElementById("myImage");
  img.src = "new-image.jpg";
}
</script>

위 예제에서는 loadImage() 함수를 사용하여 이미지를 로딩합니다. 이 함수는 getElementById() 메서드를 사용하여 myImage라는 ID를 가진 이미지 요소를 가져온 후, src 속성을 변경하여 새로운 이미지를 로딩합니다.

2. 이미지 크기 변경하기

<div>
  <img id="myImage" src="image.jpg" alt="image" />
  <button onclick="resizeImage(300, 200)">Resize Image</button>
</div>

<script>
function resizeImage(width, height) {
  var img = document.getElementById("myImage");
  img.style.width = width + "px";
  img.style.height = height + "px";
}
</script>

위 예제에서는 resizeImage() 함수를 사용하여 이미지의 크기를 변경합니다. 이 함수는 getElementById() 메서드를 사용하여 이미지 요소를 가져온 후, style 속성을 변경하여 이미지의 가로와 세로 크기를 지정합니다.

3. 이미지 회전하기

<div>
  <img id="myImage" src="image.jpg" alt="image" />
  <button onclick="rotateImage(45)">Rotate Image</button>
</div>

<script>
function rotateImage(degrees) {
  var img = document.getElementById("myImage");
  img.style.transform = "rotate(" + degrees + "deg)";
}
</script>

위 예제에서는 rotateImage() 함수를 사용하여 이미지를 회전시킵니다. 이 함수는 getElementById() 메서드를 사용하여 이미지 요소를 가져온 후, style 속성을 변경하여 이미지를 회전시킵니다.

결론

BOM을 사용하여 브라우저의 이미지를 조작할 수 있습니다. 이미지를 로딩하거나 크기를 변경하거나 회전시키는 등의 작업을 자바스크립트를 사용하여 동적으로 수행할 수 있습니다. BOM을 통해 브라우저의 이미지를 조작하여 사용자에게 더 나은 경험을 제공할 수 있습니다.

#hashtags: #BOM #이미지조작