web-dev-qa-db-fra.com

Comment ajouter du texte à une image dans React Native?

Je cherche à savoir s'il est facilement possible avec React Native ou si je devrais créer une application native.

Je souhaite modifier une image de la photothèque et y ajouter une superposition de texte. Pensez-y comme une carte postale avec un message de bienvenue.

Comment pourrais-je ajouter du texte et une image et en faire une nouvelle copie dans rea native? Je ne cherche pas de code détaillé, juste une explication sur la façon de commencer.

Mise à jour: Serait-ce une bonne alternative de simplement enregistrer les coordonnées du message sur la photo au lieu de générer une nouvelle image?

javascriptandroidiosreact-native
5
crispychicken

Vous pouvez y aller avec 2 façons. Vous pouvez soit rendre le texte sur un composant image et enregistrer la position de ce texte, soit traiter l'image et obtenir une nouvelle image avec le texte.

La première option pose le problème de cette position est relative à la taille de l'image. Cela signifie que si l'image est rendue sur un écran de taille différente, la position et la taille du texte doivent également être déplacées en conséquence. Cette option nécessite un bon algorithme de calcul. Aussi, un autre problème pourrait être les temps de rendu. Le composant texte sera rendu instantanément, mais le composant Image doit d'abord charger l'image. Cette option nécessite également un bon moyen de rendre l'algorithme.

La deuxième option n'est pas possible sans une bibliothèque tierce ou un niveau de code natif, car react-native ne prend pas en charge le traitement des images au-delà des limites de CSS. gl-react-native-v2 . Cette bibliothèque vous aide à traiter et à manipuler l'image à votre guise, puis à enregistrer le résultat avec captureFrame(config) . Cette option est plus capable de traiter un fichier mais nécessite que vous enregistriez une nouvelle image.

Quelle que soit la méthode choisie, son utilisation est adaptée à votre cas d'utilisation. La décision dépend vraiment de votre cas et de vos préférences.

9
bennygenel

Vous pouvez utiliser la balise ImageBackground de react-native car utiliser la balise Image en tant que conteneur vous donnerait un avertissement de boîte jaune.

L'exemple de code correspondant à la superposition est présenté ci-dessous.

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

Il serait efficace de travailler sur la même image en modifiant la propriété flex dans les styles de l’image ou de définir le position: absolute sur le conteneur d’image principal et d’affecter top , bottom, left, right au conteneur imbriqué.

Lien utile peut être trouvé ici

4
Pritish Vaidya

Je cherche à savoir s'il est facilement possible avec React Native ou si je devrais créer une application native.

Cela semble très faisable dans react-native

Je souhaite modifier une image de la photothèque et y ajouter une superposition de texte. Pensez-y comme une carte postale avec un message de bienvenue.

Je pense que je voudrais capturerTOUSles métadonnées pertinentes en tant qu'objet ...

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

Avec les détails ci-dessus (et peut-être davantage), vous pourrez alors reconstruire l'intention de conception sur n'importe quel appareil, quelle que soit sa taille (tablette ou mobile) ou sa profondeur en pixels. La boundingBox serait exprimée en termes relatifs aux dimensions de l’image. Dans l'exemple ci-dessus, le message serait contenu dans une zone de texte ne dépassant pas 30% de la largeur de l'image, 30% de sa hauteur et placé dans le coin supérieur gauche. 

Comment pourrais-je ajouter du texte à une image et en faire une nouvelle copie dans rea native? 

Ceci élimine le besoin de faire des captures d'écran, de manipuler des images, etc. Inutile de "créer une nouvelle copie". Traitez-les simplement comme deux actifs distincts et distincts, puis fusionnez-les au rendu en utilisant les métadonnées que vous avez capturées. 

Pensée finale: si vous devez "télécharger la photo finale sur un serveur", comme vous l'avez indiqué dans un autre commentaire pour une autre solution, vous pouvez le faire en utilisant un nombre quelconque de technologies en utilisant les métadonnées comme guide. 

2
Chris Geirman

Vous pouvez utiliser position: absolute car l'ajout d'enfants à Image est obsolète. Le code suivant alignera le texte au milieu (verticalement et horizontalement) sur l'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>
1
Atul Yadav

Si vous devez uniquement afficher un texte sur l'image, vous pouvez envelopper l'image dans une vue, puis insérer un élément de texte avec position: 'absolute' après l'image. Si vous voulez une copie de l'image contenant le texte, vous pouvez utiliser la même approche mais prendre un instantané en utilisant react-native-view-shot

1
Alexander Vitanov

Le code ci-dessous est ce que j’avais l'habitude d'ajouter du texte sur une image à des coordonnées particulières sur une image.

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

Et appelez la méthode ci-dessus comme ci-dessous 

let imageWithText = textToImage(drawText: "textOnImage", inImage:yourImage, atPoint: CGPoint(x:9,y:11))
1
Prashant Gaikwad
<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>
0
orhan fidan

Autant que je sache, le composant image peut être utilisé comme conteneur afin que vous puissiez faire quelque chose comme ceci:

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

Cela dépend du cas d'utilisation mais si vous voulez simplement mettre un texte sur une image, utiliser ImageBackground est l'une des bonnes approches.

Faites-le comme ci-dessous.

<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