我正在研究React Native是否可以轻松实现，或者我是否应该构建原生应用程序。
我想编辑照片库中的图像并为其添加文本叠加层。可以把它想象成带有问候语的明信片。
我如何添加文本和图像并在本机中制作新的副本？我不是在寻找详细的代码，只是为了解释如何开始。
更新 它是一个很好的选择，只是保存图片上的消息坐标，而不是生成一个新的图像？
答案 0 :(得分：9)
你可以选择2种方式。您可以在图像组件上渲染文本并保存该文本的位置，也可以处理图像并获取带有文本的新图像。
第一个选项提出了该位置相对于图像大小的问题。意味着如果图像在不同大小的屏幕上呈现，则文本的位置和大小也应相应地移动。此选项需要良好的计算算法。另外，另一个问题可能是渲染时间。文本组件将立即呈现，但Image组件需要首先加载图像。此选项还需要一种很好的渲染算法。
如果没有第三方库或某种级别的本机代码，第二种选择是不可能的，因为本地反应并不支持超出CSS限制的图像处理。一个良好且维护良好的图像处理库是gl-react-native-v2。此库可帮助您根据需要处理和操作图像，然后使用captureFrame(config)保存结果。此选项更能处理文件，但需要您保存新图像。
如果你的方式适合你的用例，那么这两种方式都是好的。这个决定实际上取决于你的情况和偏好。
答案 1 :(得分：4)
您可以使用react-native ImageBackground标记，因为使用Image标记作为容器会为您提供黄色框警告。
带覆盖的示例代码如下所示
<ImageBackground source={SomeImage} style= {SomeStyle} resizeMode='SomeMode'>
{loader}
</ImageBackground>
如果通过更改图像样式中的flex属性来处理同一图像，或者将position: absolute设置为主图像容器并将top , bottom, left, right指定给嵌套，效率会很高容器
可以找到有用的链接 here
答案 2 :(得分：2)
我正在研究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％，并位于左上角。
如何在图像中添加文本并在本机中制作新的副本？
这消除了进行任何截图或实际图像处理等的需要。不需要＆＃34;制作新副本＆＃34;。只需将它们视为两个独立且不同的资产，然后使用您捕获的元数据将它们合并到渲染中。
最后的想法：如果你需要＆＃34;到＆＃34;将完成的照片上传到服务器＆＃34;正如您在对另一个解决方案的另一个评论中所述，您可以使用元数据作为指南，使用任意数量的技术来执行此服务器端。
答案 3 :(得分：1)
如果您只需要在图像上显示文本，则可以将图像包装在视图中，并在图像后插入带有position: 'absolute'的文本元素。如果您想要包含文本的图像副本，那么您可以使用相同的方法，但使用react-native-view-shot
答案 4 :(得分：1)
下面的代码就是我用来在图像上的特定坐标处添加图像的文本。
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))
答案 5 :(得分：1)
您可以使用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 :(得分：1)
<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>
答案 7 :(得分：0)
据我所知，图像组件可以用作容器，所以你可以这样做：
<Image>
<Text>{"some text"}</Text>
</Image>
答案 8 :(得分：0)
这取决于用例，但是如果您只想在图像上放置文本，则使用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>
答案 9 :(得分：-1)
有几个可用的库。如果要向图像添加文本，可以使用：react-native-media-editor。这是向图像添加文本的一个很好的选择，但我建议您react-native-image-tools。它提供了很大的灵活性。您可以添加文本并相应地对其进行定位。除此之外，还有滤镜，裁剪选项，灯光调整等等。