[javascript | Vue] 이미지 다운로드 기능 만들기 (canvas/url활용)

get으로 받은 소스를 화면에 뿌리고> 그 이미지를 다운로드 받으려면 canvas를 활용해 가능하다.

 

 

👉 template (표현되어질 부분)

<v-col class="pa-5 pt-8" style="text-align: center">
  <canvas id="canvas" v-html="qrHtml" height="300"></canvas>
</v-col>

 

 

👉 template (다운로드 버튼)

 <v-btn class="pl-3 mb-2" color="accent" @click="download">
    다운받기<v-icon class="ml-1">mdi-arrow-down-bold-circle</v-icon>
  </v-btn>

 

 

👉 methods 

a 태그를 임의로 생성해 canvas 속성을 대입해 다운로드 기능을 동작하게 해준다

download() {
  var a = document.createElement("a"); //
  a.setAttribute("download", "파일이름" + ".png");
  a.setAttribute(
    "href",
    document
      .getElementById("canvas")
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream")
  );
  a.setAttribute("target", "_blank");
  
  //이벤트 호출
  a.dispatchEvent(
  
  //생성된 a태그에 클릭이벤트 설정
    new MouseEvent("click", {
      view: window,
      bubbles: false,
      cancelable: true,
    })
  );
},