[Javascript] 클릭시 ImageDownload

버튼이나 이미지 클릭시 이미지를 다운받는 Script 입니다.

검색해보면 기본적으로 a tag 에 download  attribute 를 이용해서

<a href="/test.pdf" download>

또는

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>

 또는

<a download="logo.png" href="http://localhost/folder/img/logo.png">

   
  쉽게 사용 할 경우 이렇게 사용해도 되지만
 

 

문제는 이러한 코드들의 경우

 

ie 나 크롬 브라우저들은 작동하는데

 

OS X 의 Safari 브라우저에서 작동하지 않았어요....

 

  

그래서 아이폰이나 Safari에서도 작동하는 script 를 검색하다가  검색하다가 github 에서 주웠습니다.
 

[a tag]

<a href="http://localhost/folder/img/logo.png" onclick="javascript:imgDownload(this.src, 'logo.png')">

 

[script]

<script>
  function imgDownload(imageURL, fileName) {
   var img = new Image();
         img.crossOrigin = "Anonymous";
            img.id = "getshot";
            img.src = imageURL;
            document.body.appendChild(img);
            
        var a = document.createElement("a");
            a.href = getshot.src;
            a.download = fileName;
            a.click();
            document.body.removeChild(img);
  }
</script>

이건 되네요.

이 글이 수고를 덜어드렸으면 좋겠네요.

[참고]
https://github.com/photopea/photopea/issues/1166