有没有办法使用 react-native-svg 访问剪辑的 svg 图像以保存回设备中的 react-native

Posted 2023-02-16

【中文标题】有没有办法使用 react-native-svg 访问剪辑的 svg 图像以保存回设备中的 react-native

【英文标题】：Is there a way to access a clipped svg image to save back to the device in react-native using react-native-svg

【发布时间】：2022-01-13 00:37:33

【问题描述】：

我有一张用圆圈裁剪的静态图片，现在我想将修改后的图片保存在设备的图库中，有人知道怎么做吗？我正在使用 TypeScript。

裁剪图像：

import React from "react";
import  SafeAreaView  from "react-native";
import Svg,  Circle, ClipPath, Defs, Image  from "react-native-svg";

export const App = () => 
    return (
        <SafeAreaView>
            <Svg>
                <Image
                    href=require('./apple.jpg')
                    clipPath="url(#clip)" />
                <Defs>
                    <ClipPath id="clip">
                        <Circle cx="150" cy="150" r="150" />
                    </ClipPath>
                </Defs>
            </Svg>
        </SafeAreaView>
    );


export default App;

【参考方案1】：

到目前为止，这个解决方案似乎适用于另一个库：react-native-view-shot

import React,  RefObject, useRef  from "react";
import  Button, SafeAreaView  from "react-native";
import Svg,  Circle, ClipPath, Defs, Image  from "react-native-svg";
import ViewShot,  CaptureOptions, captureRef  from "react-native-view-shot";
import RNFetchBlob,  Encoding  from "rn-fetch-blob";

const IMAGE_FOLDER = RNFetchBlob.fs.dirs.DownloadDir;

export const App = () => 
    const viewShotRef = useRef() as RefObject<ViewShot>;

    const captureAndSaveImage = async (imageName: string, options: CaptureOptions) => 
        try 
            await RNFetchBlob.fs.mkdir("./test");
            await RNFetchBlob.fs.writeFile(IMAGE_FOLDER + "/" + imageName + "." + options.format, await captureRef(viewShotRef, options), "uri" as Encoding);
         catch (error) 
            console.log(error);
        
    

    return (
        <SafeAreaView>
            <ViewShot ref=viewShotRef options= format: "jpg", quality: 1.0 >
                <Svg>
                    <Image
                        href=require('./apple.jpg')
                        clipPath="url(#clip)" />
                    <Defs>
                        <ClipPath id="clip">
                            <Circle cx="150" cy="150" r="150" />
                        </ClipPath>
                    </Defs>
                </Svg>
            </ViewShot>
            <Button title="Capture" onPress=() => captureAndSaveImage("pic1",  format: "jpg", quality: 1.0 ) />
        </SafeAreaView>
    );


export default App;