Javascript canvas.toDataURL(';image/png';);在mozila firefox浏览器中不工作
有人能提供解决方案吗Javascript canvas.toDataURL(';image/png';);在mozila firefox浏览器中不工作,javascript,html,angular,typescript,Javascript,Html,Angular,Typescript,有人能提供解决方案吗 downloadflowchart(node, workflowName) { const s = document.getElementById(node); if (s != null && s !== undefined) { const image = new Image(); const xml = new XMLSerializer().serializeToString(s); image.s
downloadflowchart(node, workflowName) {
const s = document.getElementById(node);
if (s != null && s !== undefined) {
const image = new Image();
const xml = new XMLSerializer().serializeToString(s);
image.src = 'data:image/svg+xml;base64,' + window.btoa(xml);
image.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = $($('#' + node)[0]).width();
canvas.height = $($('#' + node)[0]).height();
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
const a = document.createElement('a');
a.download = workflowName + '.png';
a.href = canvas.toDataURL('image/png');
document.body.appendChild(a);
a.click();
};
}
}
我曾经这样使用过,但在firefox中不起作用,但在其他浏览器中效果很好
HTML代码如下:
<div class="panel-body">
<div *ngIf="graphDefinitionString!=''" style="float:right">
<div title="click to download flow chart."
*ngIf="graphDefinitionString!=''"
class="btn btn-default btn-circle"
(click)="downloadflowchart('graphDiv',selectedWorkflowName);"
style="padding:15px 0;">
<i class="fa fa-download fa-lg"
aria-hidden="true"></i></div>
</div>
<div style="overflow:auto;">
<div #mermaid></div>
<!-- <app-flowchart
[result]="graphDefinitionString">
</app-flowchart>-->
<div *ngIf="graphDefinitionString==''">Workflow not
defined
</div>
</div>
</div>
工作流不是
定义
这与Angular或Typescript无关。如果你有任何HTML,那么请将其添加到你的代码示例中。另外,请查看以创建一个我们可以自己检查的代码片段。这将增加您获得好答案的机会。@EmielZuurbier您能否找到附加的HTML感谢添加它,仍然无法确定发生了什么,因为我们无法运行您的代码。检查我提供给你的链接。它有创建“堆栈片段”的说明,我们可以在自己的浏览器中运行。@EmielZuurbier你能猜出画布中发生了什么吗。toDataURL,我共享的图像中有一些重复的字母