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

How to add text to an image in React Native?

提问by crispychicken

I'm researching if it is easily possible with React Native or whether I should build a native app.

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

I want to edit an image from the photo library and add a text overlay to it. Think of it like a postcard with a greeting message on it.

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

How would I add text to and image and make a new copy of it in react native? I'm not looking for detailed code, just for an explanation on how to get started.

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

Update:Would it be a good alternative to just save the coordinates of the message on the picture instead of generating a new image?

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

回答by bennygenel

You can go with 2 ways. You can either render the text on an image component and save the position of that text or you can process the image and get a new image with the text.

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

The first option brings up the problem of that position is relative to image's size. Means that if the image renders on a different sized screen the position and size of text should also be moved accordingly. This option needs a good calculation algorithm. Also, another problem could be the rendering times. Text component will render instantly but Image component needs to load the image first. This option also needs a good way of render algorithm.

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

The second option is not possible without a 3rd party library or some level of native code since react-native doesn't support image processing beyond the limits of CSS. A good and maintained image processing library is gl-react-native-v2. This library helps you to process and manipulate the image as you wish and then save the result with captureFrame(config). This option is more capable of processing file but needs you to save a new image.

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

Either way is good if the way you go is appropriate for your use case. The decision really depends on your case and preference.

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

回答by Pritish Vaidya

You could use react-native's ImageBackgroundtag since using the Imagetag as a container would give you a yellow box warning.

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

The sample code for it with overlay is as shown below

带有叠加层的示例代码如下所示

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

It would be efficient if you work on the same image by changing the flex property in the styles of the image or you may set the position: absoluteto the main image container and assign top , bottom, left, rightto the nested container.

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

Helpful link may be found here

可以在此处找到有用的链接

回答by orhan fidan

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

回答by Chris Geirman

I'm researching if it is easily possible with React Native or whether I should build a native app.

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

This sounds very doable in react-native

这在本机反应中听起来非常可行

I want to edit an image from the photo library and add a text overlay to it. Think of it like a postcard with a greeting message on it.

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

I think I would capture ALLthe relevant metadata as an object...

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

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

With the above detail (and maybe more), you'd then be able to reconstruct the design intent on any device, regardless of size (tablet vs mobile) or pixel depth. The boundingBoxwould be expressed in terms relative to the image's rendered dimensions. In the above example, the message would be contained in a text box no more than 30% of the image width, 30% of its height, and positioned in the top-left corner.

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

How would I add text to an image and make a new copy of it in react native?

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

This eliminates the need to do any screenshotting or actual image manipulation, etc. No need to "make a new copy". Just treat them as two separate and distinct assets, then merge them at render using the metadata you captured.

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

Final thought: if you "need" to "upload the finished photo to a server" as you stated in another comment to another solution, you can do this serverside using any number of technologies using the metadata as your guide.

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

回答by Atul Yadav

You can use position: absolutesince adding children to Image is deprecated. Following code will align text in middle (vertically and horizontally) over the image:

您可以使用，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>

回答by Prashant Gaikwad

Below code is what I used to add text on image at particular coordinates on image.

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

Xcode 8.3.2 Swift 3.1

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

And call above method as below

并调用上述方法如下

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

回答by Alexander Vitanov

If you need to only show a text over the image you can wrap the image in a view and after the image insert a text element with position: 'absolute'. If you want a copy of the image containing the text then you can use the same approach but take a snapshot using react-native-view-shot

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

回答by justelouise

As far as I know, the image component can be used as a container so you can do something like this:

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

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

回答by chansuke

It depends on the use case but if you simply want to put a text on an image, using ImageBackgroundis a one of the good approach.

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

Do it like below.

像下面那样做。

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

回答by Arslan Tariq

There are several libraries available for that. If you want to add a text to an image you can use: react-native-media-editor. This is quite a good option for adding text to an image but I recommend you react-native-image-tools. It provides so much flexibility. You can add a text and position it accordingly. Apart from that, there are filters, cropping option, light adjustments and so much more.

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