[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