a태그 이미지 다운로드 구현

이미지를 다운로드 해야하는 기능을 구현하다가 나온이슈가 있어서 정리해 봅니다. 

이미지 다운로드 구현 방법

1. a태그에 href, download 속성을 사용하여 구현합니다. 정말 간단!!!

<a href="이미지 경로" download="내 지정하고 싶은 이미지명"/>

그렇지만!! 변수가 있다는 점

- 같은 출처에 있는 이미지가 아니면 작동하지 않는다.

- ie에서는 작동하지 않는다. 

 

사실 이번작업에 같은출처 이미지가 아니라 a태그를 사용할수는 없었습니다. 

 

2. XMLHttpRequest를 사용하여 직접 blob 을 얻어와 처리 

이 방법으로 하면 교차출처 이미지도 가능하고, ie도 가능하다는 점 입니다!

function downloadImg(url, fileName) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL(this.response);
    var tag = document.createElement('a');
    tag.href = imageUrl;
    tag.download = fileName;
    document.body.appendChild(tag);
    tag.click();
    document.body.removeChild(tag);
  };
  xhr.send();
}