小编Sah*_*a D的帖子

在 React Native 中保存时旋转图像的问题

实际行为:

我应该在横向右模式下实现签名板以及绘制签名的时间戳。然后对视图进行截图,并通过旋转将其以纵向模式保存在文档目录(iOS)或外部目录(Android)中。我成功地使用transform: [{rotate: '90deg"}]css属性和react-native-signature-capture在横向右模式下实现了签名屏幕,使用react-native-view-shot和react-native-view-shot保存了捕获的签名截图以及在本地目录中绘制的签名的时间戳使用 react-native-fs 将其转换为 base64 格式。

但是保存的屏幕截图不是纵向模式,我尝试旋转图像,同时将其保存在文档目录 (iOS) 或外部目录 (Android) 中而不使用任何模块。我还尝试在使用画布上下文 API 保存图像时旋转图像,但无法找到在 react-native 中访问画布以旋转图像的方法,同时将其保存为画布与 HTML DOM 相关。

预期行为:

我应该将与时间戳一起绘制的签名以纵向模式保存在文档目录(iOS)或外部目录(Android)中,如下面的屏幕截图所示。

其他资源:

代码 :

render() {
  return (
    <View
    style={{
      flex: 1,
      flexDirection: 'row',
      overflow: "hidden",
    }}>
    <StatusBar hidden={true} />
    <View
      style={{
        flex: 0.8,
        flexDirection: 'row-reverse',
        marginVertical: width / 18,
        overflow: "hidden",
      }}>
      <ViewShot
        ref="viewShot"
        style={[styles.viewShot, { transform: [{ rotate: this.state.bool && '90deg' }] }]}>
        {/* options={{ width: height, height: width }}> */}
        <SignatureCapture
          style={styles.signature}
          ref={sign => …
Run Code Online (Sandbox Code Playgroud)

android rotation signature ios react-native

5
推荐指数
1
解决办法
1242
查看次数

标签 统计

android ×1

ios ×1

react-native ×1

rotation ×1

signature ×1