자바스크립트로 이미지 다운로드

여기저기 어렵게 찾았네요..

  function downloadImage(imageUrl,fName){

    if(/msie|trident/i.test(navigator.userAgent)){ // IE 인지 체크

      var _window = window.open(imageUrl, '_blank');// 새창으로 열어서..

      _window.document.close();

      _window.document.execCommand('SaveAs', true, fName);// 저장하라, false 로 해도 동일

      _window.close();// 끝나면 새창 닫음

    }else{

      var $a = $("<a>").attr("href", imageUrl).attr("download", fName).appendTo("body");// HTML 5 가 가능한 녀석들은 좋아..

      $a[0].click();

      $a.remove();

    }

  }

imageUrl 에는 이미지 경로, fName 은 imageUrl 이 로컬에 다운로드 될 때 사용되는 파일명

그런데, 상기 IE 모듈도.. 문제가 있네요.. 그냥 화면이 닫히는 현상이 IE11 에서 발견.. ㅠ.

그래서 다시 iframe 이용한 다운로드 참조.. http://blog.naver.com/naji22/140101613699

이 때에는 더블클릭하라고 해야 하겠네요..

에구구.. 문제가 또 있네요. iframe 이 DOM 에 올려질 때 onload 에 의해서, .htm 을 저장하라는 화면이 뜬다는거..

그래서 아래와 같이 정정하니까 이제 뭔가 제대로 되는듯.. 그래도 처음 클릭 때에는 아무것도 안해요.. ㅠ.

<iframe id="imgdown4IE" name="imgdown4IE" src="" width="0" height="0" frameborder="0" onload=""></iframe>

<script>

  var numDownloadImage = 0;

  function downloadImage(imageUrl,fName){ // 이미지 다운로드

    if(/msie|trident/i.test(navigator.userAgent)){ // IE 가 항상 문제..

      $('#imgdown4IE').attr('src',imageUrl); // 이미지 세팅

      if(numDownloadImage++>0) imgdown4IE.document.execCommand('SaveAs'); // 최초에는 iframe 에 이미지가 들어가 있지 않아서 2회부터 작동

    }else{

      var $a = $("<a>").attr("href", imageUrl).attr("download", fName).appendTo("body");// HTML 5 가 가능한 녀석들은 좋아..

      $a[0].click();

      $a.remove();

    }

  }

  $(document).ready(function(){

    if(/msie|trident/i.test(navigator.userAgent)) downloadImg();// 2번 호출해야 해서 여기에 기술했음..  이제는 다운로드 해도

  });

</script>

이미지가 변경되면 또 어떻게 코딩을 해야 할른지..

아니면, src 세팅을 한 다음 일정 시간을 정지하게 하고 이후에 execCommand() 를 실행..?

아무래도 iframe 안에 image 를 세팅하는 시간이 필요한 듯..