如何在客户端返回一个带有image.onload的值

我试图使用Blob从svg元素中导出png图像。在这里，当我点击锚标记图像已被导出，但没有内容，因为完成点击事件后调用异步方法（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>

示例链接：http://jsfiddle.net/kyjs655r/347/

来源

2017-10-09 Akbar Basha

你的第一行是会得到你几票倒下。因为知道真正问题的人更有可能获得更适合的副本，所以我们关闭问题。所以请不要问我们做什么和不该做什么。也请尽量写清楚你的问题。 – Rajesh

我将不得不继续并将其标记为重复，对不起。已经有很多解释如何处理异步函数调用 –

您可以使用Promise构造和async/await，内<img>加载事件

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 resolve()<canvas>元素http://jsfiddle.net/kyjs655r/351/

来源

2017-10-09 05:40:34 guest271314

这可能是一个自以为是的评论，但我们不应该将其标记为复制，因为承诺覆盖在复制 – Rajesh

@Rajesh您可以投票或不投票，因为你看到适合。 – guest271314

@ guest271314在你的示例中没有工作..当我点击时，图像没有被导出，当我点击第二次后，只有图像已经导出 –

如何在客户端返回一个带有image.onload的值

回答

相关问题