Vue.js에서 Base64로 인코딩 된 이미지 파일 출력

1. Canvas 사용방법

// 1. canvas 엘리먼트를 취득한다.

const canvas = document.getElementById('myCanvas');

// 2. 2d모드의 그리기 객체를 취득한다. => 이 객체를 통해 canvas에 그림을 그릴 수 있다.

const ctx = canvas.getContext("2d");

// 3. 이미지 객체 생성

const img = new Image();

// 4. 이미지 소스 설정

img.src = '../img/img_patrn.png';

// 5. 이미지 로드이벤트- 콜백함수 등록

img.onload = function(){

 ctx.drawImage(img, x좌표, y좌표, 너비, 높이); 

* 너비/높이는 옵션이며, 생략시 원본 크기대로 이미지를 띄운다.

    // 이미지 그리기 ctx.drawImage(img, 100, 100);

}

 

2. Base 64 저장시 퀄리티 조절하기

// 최대 화질

canvas.toDataURL('image/jpeg', 1.0);
// 중간 화질
canvas.toDataURL('image/jpeg', 0.5);
// 낮은 화질
canvas.toDataURL('image/jpeg', 0.2);

3. 기본 소스코드 

<template>
  <div>
    <img :src="decodedImage" alt="Decoded Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      encodedString: 'data:image/jpeg;base64, <디코딩할 base64 문자열>', 
      decodedImage: '', // 디코딩 결과를 저장할 변수
    };
  },
  mounted() {
    // 컴포넌트가 마운트된 후 실행
    this.decodeImage(this.encodedString); // base64 이미지 디코딩 수행
  },
  methods: {
    decodeImage(base64String) {
      const img = new Image();
      img.src = base64String;
      img.setAttribute('crossOrigin', 'anonymous');
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext('2d').drawImage(img, 0, 0);
        this.decodedImage = canvas.toDataURL('image/jpeg'); // 출력할 이미지 파일 형식 지정
      };
    },
  },
};
</script>