Javascript 如何将SVG转换为PNG？

我正在尝试制作一个应用程序，用户必须绘制一些东西，然后我使用该绘图和Tensorflow来检测形状。我设法用PanGestureHandler、View、Svg和Path制作了一个图形画布，但现在我想将这个画布转换为PNG（base64 blob）。我有一个将每个点转换为svg d的函数，所以我的计划是让svg开始和结束如下：

this.svgBegin = `<svg height="210" fill="red" viewBox="0 0 1000 1000" width="400" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="red" d="`
this.svgEnd = `"/></svg>`

return (
        <PanGestureHandler onGestureEvent={this._onPanGestureEvent}>
            <View style={{width: windowWidth, height: windowHeight - 100, backgroundColor: 'green'}}>
            <Svg width={windowWidth} fill={"#FFF"} height={windowHeight-100}
          >
          <G>
            <Path
                // key={this.state.previousStrokes.length}
                d={this.pointsToSvg(this.state.vector)}
                stroke={"#000"}
                strokeWidth={4}
                fill="none"
                strokeLinecap="round"
                strokeLinejoin="round"
                
              />
          </G>
        </Svg>
        <Button title={"Clear"} onPress={() => this.hide()} />
        <Button title={"Export"} onPress={() => this.exportBase()} />

            </View>
        </PanGestureHandler>
    );

this.pathRef.current.toDataURL(data => { ... play with data } )

并将blob传递给图像组件以查看结果（无论如何，我不需要显示它，我只想检查输出图像是否就是我刚才绘制的）

我做错事情了吗？我认为react原生svg/svg组件有问题。当我将face xml svg导出到一个真实的文件并在浏览器中打开它时，它正是我在自制画布上绘制的内容。顺便说一句，我用的是世博会。

---

谢谢大家!

我认为最好的方法是使用图书馆。复制最终图纸并在viewshot内渲染并捕获。谢谢您的建议。伊玛现在就去看看。不知怎的，我解决了这个问题，这是我的引用的一个问题（我在我的组件中有很多引用，我有点迷失在其中）。再次感谢