如何将文本添加到React Native中的图像？

Question

我在研究React Native是否容易实现，或者我是否应该构建本机应用程序。

我想编辑图片库中的图片，并为其添加文字覆盖。把它想象成一张带有问候信息的明信片。

如何将文本添加到图像中并在原生反应中制作新的副本？我不在寻找详细的代码，只是为了解释如何开始。

更新： 这是一个很好的选择，只保存图片上的消息坐标，而不是生成一个新的图像？

Answer 1

如果您只需要在图像上显示文字，您可以在图像中包裹图像，然后在图像中插入文字元素position: 'absolute'。如果你想要一个包含文本的图像副本，那么你可以使用相同的方法，但使用react-native-view-shot

Answer 2

你可以用2种方式。您可以在图像组件上渲染文本并保存该文本的位置，也可以处理图像并使用文本获取新图像。

第一个选项提出了该位置相对于图像大小的问题。意思是如果图像在不同尺寸的屏幕上呈现，文字的位置和大小也应相应地移动。这个选项需要一个好的计算算法。另外，另一个问题可能是渲染时间。文本组件将立即渲染，但图像组件需要首先加载图像。这个选项也需要一个很好的渲染算法。

如果没有第三方库或一定程度的本机代码，第二种选择是不可能的，因为react-native不支持超出CSS限制的图像处理。一个好的和维护的图像处理库是gl-react-native-v2。该库可以帮助您按照需要处理和操作图像，然后使用captureFrame(config)保存结果。此选项更能够处理文件，但需要您保存新图像。

无论哪种方式都很好，如果你的方式适合你的用例。这个决定真的取决于你的情况和偏好。

Answer 3

据我所知，图像组件可以作为一个容器，这样你可以做这样的事情：

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

Answer 4

你可以使用反应本地的ImageBackground标记，因为使用Image标签的容器会给你一个黄色框警告。

是如下图所示

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

它与覆盖的示例代码，如果你在样式的图像的改变弯曲性能在同一图像上工作，或者你可以通过设置position: absolute这将是有效的到主图像容器并将top , bottom, left, right分配给嵌套容器。

有用的链接，可以发现here

Answer 5

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

的Xcode 8.3.2夫特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)) 

Answer 6

有许多可用于几个库。如果你想添加文字到图片上，你可以使用：react-native-media-editor。这是向图片添加文字的不错选择，但我建议您react-native-image-tools。它提供了非常多的灵活性。您可以添加一个文本并相应地定位它。除此之外，还有过滤器，裁剪选项，灯光调整等等。

Answer 7

我在研究React Native是否可以轻松实现，或者我应该构建本机应用程序。

这反应母语

我想编辑从照片库中的图像和文本叠加添加到它听起来很可行。把它想象成一张带有问候信息的明信片。

我想我会抓住ALL相关的元数据对象...

{ 
    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 
     } 
    } 
} 

通过上述细节（也许更多），你会那么能够重建设计意图在任何设备上，无论大小（平板电脑vs手机）还是像素深度。 boundingBox将以相对于图像的呈现尺寸的术语表示。在上面的示例中，消息将包含在文本框中，不超过图像宽度的30％，高度的30％，并位于左上角。

我该如何向图像添加文本并在原生反应中制作新副本？

这消除了做任何截图或实际图像操作等的需要。无需“制作新副本”。只要将它们视为两个单独且不同的资产，然后使用您捕获的元数据在渲染时合并它们。最终想法：如果您需要“将完成的照片上传到服务器”，如您在另一个解决方案的其他评论中所述，那么您可以使用任何数量的使用元数据作为指南的技术来执行此服务器。