有没有办法使用 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有没有办法使用 react-native-svg 访问剪辑的 svg 图像以保存回设备中的 react-native
【发布时间】：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;

【问题讨论】：

标签： typescript react-native react-native-svg

【解决方案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;

【讨论】：