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,我共享的图像中有一些重复的字母