时间戳

首页 > 解决方案 > React Native将SVG转换为PNG？

javascript - React Native将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>`

以及它们之间的点，所以我有点伪造从 react-native-svg 到 xml 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>
    );

问题是似乎没有任何效果。我将我构建的 svg 字符串发送给另一个并将其传递给 xml={} 道具，然后通过使用引用，我执行以下操作：

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

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

我做错了吗？我认为 react-native-svg/Svg 组件有问题。当我将面部 xml svg 导出到真实文件并在浏览器中打开时，这正是我在自制画布上绘制的内容。顺便说一句，我正在使用世博会。谢谢！

标签： javascriptreact-nativesvgexpo

解决方案

推荐阅读