如何在 React Native 中向图像添加文本？

Posted 2023-03-14

【中文标题】如何在 React Native 中向图像添加文本？

【英文标题】：How to add text to an image in React Native?

【发布时间】：2017-10-05 16:50:21

【问题描述】：

我正在研究 React Native 是否可以轻松实现，或者我是否应该构建一个原生应用程序。

我想编辑照片库中的图像并为其添加文本叠加层。把它想象成一张带有问候语的明信片。

如何在 react native 中添加文本和图像并制作新副本？我不是在寻找详细的代码，只是为了说明如何开始。

更新： 将消息的坐标保存在图片上而不是生成新图像是一个不错的选择吗？

【问题讨论】：

一段时间过去了...您实施了解决方案吗？我想为视频做。如果有，可以把代码贴在这里吗？

【参考方案1】：

您可以选择两种方式。您可以在图像组件上渲染文本并保存该文本的位置，也可以处理图像并获取带有文本的新图像。

第一个选项提出了该位置与图像大小相关的问题。意味着如果图像在不同大小的屏幕上呈现，则文本的位置和大小也应相应移动。这个选项需要一个好的计算算法。此外，另一个问题可能是渲染时间。 Text 组件会立即渲染，但 Image 组件需要先加载图像。这个选项还需要一个好的渲染算法。

如果没有 3rd 方库或某种级别的本机代码，第二个选项是不可能的，因为 react-native 不支持超出 CSS 限制的图像处理。一个良好且维护良好的图像处理库是gl-react-native-v2。该库可帮助您根据需要处理和操作图像，然后使用captureFrame(config) 保存结果。此选项处理文件的能力更强，但需要您保存新图像。

如果您采用的方式适合您的用例，那么任何一种方式都是好的。这个决定真的取决于你的情况和偏好。

【讨论】：

好答案。所以你会推荐gl-react-native而不是使用react-native-view-shot制作快照

@crispychicken 谢谢。我不能专门推荐一个图书馆。如果另一个库更适合您或更好地用于您的案例，您应该使用它。 gl-react-native 只是图像处理库的一个示例。

@bennygenel 关于在 react-native 中向视频添加文本有什么想法吗？

@Yossi 我没有这方面的经验，但我认为方法是一样的。

链接版本已过期。此处提供了带有精美在线演示的新版本：github.com/gre/gl-react

【参考方案2】：

你可以使用 react-native 的 ImageBackground 标签，因为使用 Image 标签作为容器会给你一个黄框警告。

覆盖的示例代码如下所示

<ImageBackground source=SomeImage style=  SomeStyle resizeMode='SomeMode'>
   loader
</ImageBackground>

如果您通过更改图像样式中的 flex 属性来处理同一个图像，或者您可以将position: absolute 设置为主图像容器并将top , bottom, left, right 分配给嵌套容器，这将是有效的。

可以找到有用的链接here

【参考方案3】：

<View style=flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 20>
    <Image
     style=
       flex: 1,
       width:100,
       height:100,
     
     source=require('../imgs/star.png')
     />
     <Text style=position: 'absolute', fontSize: 20>890</Text>
 </View>

【参考方案4】：

我正在研究 React Native 是否可以轻松实现，或者我是否应该构建一个原生应用程序。

这在 react-native 中听起来很可行

我想编辑照片库中的图像并为其添加文本叠加层。把它想象成一张带有问候语的明信片。

我想我会将所有相关元数据作为一个对象捕获...

    image: 
        uri: './assets/image.jpg',
        height: 576,
        width: 1024
    ,
    message: 
        fontFace: 'Calibri',
        fontSize: 16,
        text: 'Happy Holidays!'
        boundingBox:  
            height: '30%',
            width: '30%',
            top: 0,
            left: 0
        
    

有了上述细节（也许更多），您就可以在任何设备上重构设计意图，无论大小（平板电脑与移动设备）或像素深度如何。 boundingBox 将以相对于图像的渲染尺寸表示。在上面的示例中，消息将包含在不超过图像宽度的 30%、高度的 30% 且位于左上角的文本框中。

如何将文本添加到图像并在 React Native 中制作新副本？

这消除了进行任何屏幕截图或实际图像处理等操作的需要。无需“制作新副本”。只需将它们视为两个独立且不同的资产，然后在渲染时使用您捕获的元数据将它们合并。

最后的想法：如果您“需要”“将完成的照片上传到服务器”，正如您在另一个解决方案的另一条评论中所述，您可以使用任何数量的技术使用元数据作为您的指南来执行此服务器端。

【讨论】：

我相信你的 boundigBox 逻辑有一些流程。虽然就像你说的，如果你给盒子相对大小，文本的大小总是用fontSize设置。

@bennygenel 感谢您的反馈。我不确定您所说的“有一些流量”是什么意思。当然，fontSize 也需要是相对的，但我认为这个概念仍然可以传达，不是吗？

调整fontSize需要计算图片的原始尺寸和图片当前的view尺寸。您需要计算更改的比率，然后设置字体大小。定位也是一样的。您应该调整相对于新尺寸的位置。例如，如果文本从 x: 100 开始，对于 500 像素的图像，它应该从 x: 50 开始，对于 250 像素。

这对我来说很有意义

【参考方案5】：

您可以使用position: absolute，因为不推荐将子项添加到 Image。以下代码将在图像中间（垂直和水平）对齐文本：

<View>
    <Image
        source=yourImageUrl
        resizeMode='cover'
        style=
            width: 300,
            height: 300
        
    />

    <View style= position: 'absolute', top: 0, left: 0, right: 0, height: 300, alignItems: 'center', justifyContent: 'center' >
        <Text>Your overlay text</Text>
    </View>
</View>

【参考方案6】：

如果您只需要在图像上显示文本，您可以将图像包裹在视图中，然后在图像之后插入带有position: 'absolute' 的文本元素。如果您想要包含文本的图像副本，则可以使用相同的方法，但使用 react-native-view-shot 拍摄快照

【讨论】：

好主意，但我认为图像质量会更差，图像尺寸会减小到手机像素大小......

应用的目的是什么？

在平板电脑上显示带有问候语的明信片。因此，应针对平板电脑尺寸优化图像质量。图片是手机拍的。

用户应该能够保存图像吗？如果没有，那么您可以使用我上面解释的设置简单地提取一个新组件

我需要将完成的照片上传到服务器。

【参考方案7】：

下面的代码是我用来在图像上特定坐标处添加文本的代码。

Xcode 8.3.2 Swift 3.1

func textToImage(drawText text: NSString, inImage image: UIImage, atPoint point: CGPoint) -> UIImage 
        let textColor = UIColor.white
        let textFont = UIFont(name: "Helvetica Bold", size: 10)!

        let scale = UIScreen.main.scale
        UIGraphicsBeginImageContextWithOptions(image.size, false, scale)

        let textFontAttributes = [
            NSFontAttributeName: textFont,
            NSForegroundColorAttributeName: textColor,
            ] as [String : Any]
        image.draw(in: CGRect(origin: CGPoint.zero, size: image.size))

        let rect = CGRect(origin: point, size: image.size)
        text.draw(in: rect, withAttributes: textFontAttributes)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()


        return newImage!
    

并调用上面的方法如下

let imageWithText = textToImage(drawText: "textOnImage", inImage:yourImage, atPoint: CGPoint(x:9,y:11))

【参考方案8】：

据我所知，图像组件可以用作容器，因此您可以执行以下操作：

<Image>
  <Text>"some text"</Text>
</Image>

【讨论】：

他需要将编辑好的图片上传到服务器。此外，不推荐将子级添加到 Image。

【参考方案9】：

有几个可用的库。如果要向图像添加文本，可以使用：react-native-media-editor。这是向图像添加文本的不错选择，但我推荐您react-native-image-tools。它提供了很大的灵活性。您可以添加文本并相应地定位它。除此之外，还有滤镜、裁剪选项、灯光调整等等。

【参考方案10】：

这取决于用例，但如果您只是想在图像上放置文本，使用 ImageBackground 是一种好方法。

像下面那样做。

<ImageBackground
  source= uri: hoge 
  style=
    height: 105,
    width: 95,
    position: 'relative', // because it's parent
    top: 7,
    left: 5
  
>
  <Text
    style=
      fontWeight: 'bold',
      color: 'white',
      position: 'absolute', // child
      bottom: 0, // position where you want
      left: 0
    
  >
    hoge
  </Text>
</ImageBackground>