クライアント側で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

私は先に進み、とにかくこれを複製とマークしなければならないでしょう、残念です。非同期関数呼び出しを扱う方法はすでに多くの説明があります –