클라이언트 측에서 image.onload를 사용하여 값을 반환하는 방법

Blob을 사용하여 svg 요소에서 png 이미지를 내보내려고했습니다. 여기에서 앵커 태그를 클릭하면 이미지가 내보내졌지만 click 이벤트를 완료 한 후에 호출되는 비동기 메서드 (image.onload())로 인해 콘텐츠가 없습니다. 이 문제를 해결하는 방법?클라이언트 측에서 image.onload를 사용하여 값을 반환하는 방법

<body> 
    <a id="export">Click To Export</a> 
    <div id="container" width=500px height=200px> 
     <svg id="myViewer" width="500px" height="200px" xmlns="http://www.w3.org/2000/svg"> 
      <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" 
      /> 
     </svg> 
    </div> 
    <script> 
     document.getElementById('export').onclick = function() { 
      var tag = document.getElementById('export'); 
      tag.download = 'Sample' + "." + 'png'; 
      tag.href = getCanvaElement().toDataURL(); 
     } 

     function getCanvaElement() { 
      var svgText = document.getElementById("myViewer").outerHTML; 
      var svg = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" }); 
      var domURL = self.URL || self.webkitURL || self; 
      var url = domURL.createObjectURL(svg); 
      var element = document.createElement('canvas'); 
      var ctx = element.getContext("2d"); 
      var image = new Image; 
      image.onload = function() { 
       ctx.drawImage(this, 0, 0); 
       domURL.revokeObjectURL(url); 
      }; 
      image.src = url; 
      return element; 
     } 
    </script> 
</body>

샘플 링크 : 당신은 Promise 생성자와 async/await,

document.getElementById('export').onclick = async function() { 
    var tag = document.getElementById('export'); 
    tag.download = 'Sample' + "." + 'png'; 
    const canvas = await getCanvaElement(); 
    tag.href = canvas.toDataURL(); 
} 

function getCanvaElement() { 
    return new Promise(resolve => { 
    var svgText = document.getElementById("myViewer").outerHTML; 
    var svg = new Blob([svgText], { 
     type: "image/svg+xml;charset=utf-8" 
    }); 
    var domURL = self.URL || self.webkitURL || self; 
    var url = domURL.createObjectURL(svg); 
    var element = document.createElement('canvas'); 
    var ctx = element.getContext("2d"); 
    var image = new Image; 
    image.onload = function() { 
     ctx.drawImage(this, 0, 0); 
     domURL.revokeObjectURL(url); 
     resolve(element) 
    }; 
    image.src = url; 
    }) 
}

jsfiddle <img>로드 이벤트에서 resolve()<canvas> 요소를 사용할 수 http://jsfiddle.net/kyjs655r/347/

출처

2017-10-09 Akbar Basha

첫 번째 라인은 당신을 얻을 것입니다 투표가 적다. 실제 문제를 알고있는 사람들이 더 적합한 복제물을 얻을 가능성이 높아지기 때문에 질문을 마감합니다. 그러니 무엇을하지 말고 무엇을하지 말아야하는지 묻지 마십시오. 또한 문제를 명확히 기재하십시오. – Rajesh

나는 이것을 어쨌든 중복으로 표시해야 할 것입니다. 미안합니다. 이미 비동기 함수 호출을 다루는 방법에 대한 많은 설명이 있습니다 –