[Javascript] img 태그 파일 확장자 변경하기

Javascript로 img 태그의 파일 확장자를 변경하는 방법에 대해 간략히 알아보겠습니다. 예제는 BMP -> PNG로 변환하는 과정입니다.

함수작성

async function handleImageModalClick(bmpUrl) {
  try {
    var modalImg = document.getElementById("modalImage");
    var bmpUrl = modalImg.src;

    // Fetch the BMP image as an ArrayBuffer
    const response = await fetch(bmpUrl);
    const arrayBuffer = await response.arrayBuffer();

    // Create a Blob from the ArrayBuffer and an Image object
    const blob = new Blob([arrayBuffer], { type: 'image/bmp' });
    const img = new Image();

    img.onload = () => {
      // Create a canvas to draw the image
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);

      // Convert the canvas content to PNG format
      const pngDataUrl = canvas.toDataURL('image/png');
      modalImg.src = pngDataUrl;
    };

    img.src = URL.createObjectURL(blob);
  } catch (error) {
    console.error('Error converting BMP to PNG:', error);
  }
}

• ID가 modalImg 인 태그의 src 속성을 가져와 canvas 를 이용해 png 파일로 변환하여 출력합니다.

감사합니다.