Javascript 如何在客户端使用image.onload返回值
我尝试使用Blob从svg元素导出png图像。在这里，当我单击锚定标记时，图像已导出，但由于在完成单击事件后调用了异步方法（image.onload（）），因此没有内容。如何解决这个问题Javascript 如何在客户端使用image.onload返回值,javascript,svg,export,client-side,Javascript,Svg,Export,Client Side,我尝试使用Blob从svg元素导出png图像。在这里，当我单击锚定标记时，图像已导出，但由于在完成单击事件后调用了异步方法（image.onload（）），因此没有内容。如何解决这个问题 <body> <a id="export">Click To Export</a> <div id="container" width=500px height=200px> <svg id="myViewer" width=
<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
构造函数和异步/等待
，解析（）
jshiddle你的第一行将为你赢得几张反对票。我们结束了这个问题，因为了解真实问题的人更有可能得到更合适的副本。所以请不要问我们做什么和不做什么。另外，请把你的问题写清楚。我还是要把它标记为重复的，对不起。关于如何处理异步函数调用，已经有很多解释。这可能是一个固执己见的评论，但我们是否应该将其标记为dupe，正如本文中所述dupe@Rajesh您可以根据自己的意愿投票或不投票。@guest271314在您的示例中不起作用。。当我单击时，当我第二次单击时，图像尚未导出，此后仅导出了图像export@AkbarBasha问题是，单击
处理程序中的代码仅设置的.href
，或重新排列代码。@AkbarBasha
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;
})
}