안녕하세요. 엔지엠소프트웨어입니다. JavaScript에서 로컬 컴퓨터로 이미지를 다운로드하는 방법은 a 태그를 동적으로 생성한 후 download 특성에 파일명을 입력해주면 됩니다. 그런데, 크로스 도메인 문제로 일부 브라우저에서 동작하지 않았는데요. 구글 크롬에서도 여러가지 이유로 더이상 지원하지 않게 되었습니다. 그렇다보니 다른 도메인에 있는 이미지를 a 태그의 download 특성으로 다운로드 할 수 없습니다. 아래와 같이 처리하면 기존처럼 이용할 수 있어요^^

async function toDataURL(url) {
    const blob = await fetch(url).then(res => res.blob());
    return URL.createObjectURL(blob);
}

var img_path = "https://img.alicdn.com/imgextra/img.alicdn.com/imgextra/i3/2185632574/O1CN01twXDQs1UswGATpux5_!!2185632574.jpg_430x430q90.jpg";
var num = img_path.lastIndexOf("/"); 
var file_name = img_path.substr(num+1); 
const a = document.createElement("a");
a.href = await toDataURL(img_path);
a.download = file_name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

개발자에게 후원하기

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~