如何使用带有 angular 6 的 save-svg-as-png

Question

我正在尝试在我的 angular 7 项目中使用save-svg-as-png库。

但是，我无法让它发挥作用。我已经使用

npm install --save save-svg-as-png

我可以在 node_modules 下看到库。

不幸的是，该库是一个旧式的 javascript 库，我不知道我需要做什么才能在我的打字稿组件中访问它。

自述文件引用了显然存在类型定义的Typings库。但是，Typings 页面提到它在 TypeScript 2 中已被弃用，所以我没有追求这个。

显然有@types/save-svg-as-png支持原生 Angular 2+，但是当我尝试安装它时

npm install --save @types/save-svg-as-png

找不到库 ( npm ERR! code 404)。

我用谷歌搜索了更多并在 github上遇到了这个问题，有人显然已经通过将它包含在 angular-cli.js 文件中来让它与 Angular 2 一起工作，但是随着对 Angular 的更改，这个文件在版本 7 中不再存在，我不知道现在需要怎么做。

我还发现了以下关于如何将 javascript 库集成到 Angular 2+ 中的文章，但其中大部分依赖于 @types 可用（它们不是，见上文）并且只有一个简短的部分关于如何提供你自己的库typings.d.ts文件，但玩了很长一段时间后，我没有进一步。是否有更详细的解释说明如何使用这种方法？

我还在stackoverflow 上找到了这篇关于如何将基于 IIFE 的库集成到打字稿应用程序中的文章，但没有让它工作。

我已将以下行添加到我的index.html文件中

<script type="javascript" src="node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>

但是我现在如何访问库提供的功能？如果我理解正确的话，它们现在应该可以在 window 对象上使用，但情况似乎并非如此。

我还阅读了有关如何使用非打字稿库的这个stackoverflow 问题，但我的问题之一是我什至不知道要导入哪个命名空间save-svg-as-png。

有没有人设法让这个库与 Angular 6/7 项目一起工作，并且可以详细解释所需的所有步骤？

Answer 1

我将尝试按照 Hypenate 的建议总结解决方案：

安装库：

npm install --save save-svg-as-png

在我的打字稿文件/角度组件的顶部：

import * as svg from 'save-svg-as-png';

在我的角度组件中使用它：

svg.svgAsPngUri(document.getElementById('idOfMySvgGraphic'), {}, (uri) => {
      console.log('png base 64 encoded', uri);
    });

所有导出的函数都可以在svg.