web-dev-qa-db-ja.com

React Nativeで画像にテキストを追加する方法は？

React Nativeで簡単に可能かどうか、またはネイティブアプリを作成する必要があるかどうかを調査しています。

フォトライブラリの画像を編集し、テキストオーバーレイを追加したい。グリーティングメッセージが書かれたはがきのようなものだと考えてください。

テキストと画像にどのように追加し、それの新しいコピーをreactネイティブで作成しますか？私は詳細なコードを探すのではなく、開始方法の説明を求めています。

pdate：新しい画像を生成するのではなく、メッセージの座標を画像に保存するだけの良い代替手段でしょうか？

javascriptandroidiosreact-native
6
crispychicken

あなたは2つの方法で行くことができます。画像コンポーネントにテキストをレンダリングしてそのテキストの位置を保存するか、画像を処理してテキストを含む新しい画像を取得することができます。

最初のオプションは、その位置が画像のサイズに関連しているという問題を引き起こします。画像が異なるサイズの画面に表示される場合、それに応じてテキストの位置とサイズも移動する必要があることを意味します。このオプションには、適切な計算アルゴリズムが必要です。また、もう1つの問題はレンダリング時間です。テキストコンポーネントは即座にレンダリングされますが、イメージコンポーネントは最初にイメージをロードする必要があります。このオプションには、レンダリングアルゴリズムの優れた方法も必要です。

2番目のオプションは、react-nativeがCSSの制限を超える画像処理をサポートしていないため、サードパーティのライブラリまたはある程度のネイティブコードなしでは不可能です。良好で維持されている画像処理ライブラリは gl-react-native-v2 です。このライブラリは、イメージを希望どおりに処理および操作し、結果を captureFrame(config) で保存するのに役立ちます。このオプションはファイルの処理能力が高いですが、新しい画像を保存する必要があります。

どちらの方法でも、ユースケースに適した方法を選択できます。決定は本当にあなたのケースと好みに依存します。

10
bennygenel

コンテナとしてImageBackgroundタグを使用すると、黄色のボックス警告が表示されるため、react-nativeのImageタグを使用できます。

オーバーレイ付きのサンプルコードは次のとおりです

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

画像のスタイルのflexプロパティを変更して同じ画像で作業するか、position: absoluteをメイン画像コンテナに設定して、ネストされたコンテナにtop , bottom, left, rightを割り当てると効率的です。

役立つリンクが見つかるかもしれませんここ

4
Pritish Vaidya
<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>
3
orhan fidan

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％以下のテキストボックスに含まれ、左上隅に配置されます。

画像にテキストを追加して、reactネイティブで新しいコピーを作成するにはどうすればよいですか？

これにより、スクリーンショットや実際の画像操作などを行う必要がなくなります。「新しいコピーを作成」する必要はありません。それらを2つの別個の異なるアセットとして扱い、キャプチャしたメタデータを使用してレンダリング時にそれらをマージします。

最終的な考え：別のソリューションの別のコメントで述べたように「完成した写真をサーバーにアップロードする」必要がある場合は、メタデータをガイドとして使用する任意の数のテクノロジーを使用して、このサーバーサイドで実行できます。

2
Chris Geirman

Imageへの子の追加は非推奨であるため、position: absoluteを使用できます。次のコードは、テキストを画像の中央（垂直および水平）に配置します。

<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>
1
Atul Yadav

画像の上にテキストのみを表示する必要がある場合は、画像をビューにラップし、画像の後にposition: 'absolute'を使用してテキスト要素を挿入できます。テキストを含む画像のコピーが必要な場合は、同じアプローチを使用できますが、 react-native-view-shot を使用してスナップショットを作成できます

1
Alexander Vitanov

以下のコードは、画像上の特定の座標に画像上のテキストを追加するために使用したものです。

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))
1
Prashant Gaikwad

私の知る限り、画像コンポーネントはコンテナとして使用できるため、次のようなことができます。

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

ユースケースにもよりますが、単に画像にテキストを配置したい場合は、ImageBackgroundを使用するのが良い方法の1つです。

以下のようにしてください。

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