wake-up-neo.net

Wie füge ich ein Bild in React Native hinzu?

Ich untersuche, ob es mit React Native problemlos möglich ist oder ob ich eine native App erstellen sollte.

Ich möchte ein Bild aus der Fotobibliothek bearbeiten und eine Textüberlagerung hinzufügen. Stellen Sie sich das wie eine Postkarte mit einer Grußbotschaft vor.

Wie füge ich Text und Bild hinzu und mache eine neue Kopie in respons native? Ich suche nicht nach detailliertem Code, sondern nur nach einer Erklärung, wie man loslegen kann.

Update: Wäre es eine gute Alternative, einfach die Koordinaten der Nachricht auf dem Bild zu speichern, anstatt ein neues Bild zu generieren?

5
crispychicken

Sie können auf zwei Arten gehen. Sie können den Text entweder in einer Bildkomponente rendern und die Position dieses Texts speichern oder Sie können das Bild bearbeiten und ein neues Bild mit dem Text erhalten.

Die erste Option wirft das Problem dieser Position relativ zur Bildgröße auf. Bedeutet, dass, wenn das Bild auf einem Bildschirm mit einer anderen Größe dargestellt wird, die Position und Größe des Texts auch entsprechend verschoben werden soll. Diese Option erfordert einen guten Berechnungsalgorithmus. Ein weiteres Problem könnten die Renderzeiten sein. Die Textkomponente wird sofort gerendert, aber die Bildkomponente muss das Bild zuerst laden. Diese Option erfordert auch einen guten Algorithmus für das Rendern.

Die zweite Option ist ohne die Bibliothek eines Drittanbieters oder eine bestimmte Ebene von nativem Code nicht möglich, da Reactative die Bildverarbeitung außerhalb der Grenzen von CSS nicht unterstützt. Eine gute und gepflegte Bildbearbeitungsbibliothek ist gl-reag-native-v2 . Diese Bibliothek hilft Ihnen, das Bild nach Ihren Wünschen zu bearbeiten und zu bearbeiten, und speichert dann das Ergebnis mit captureFrame(config) . Diese Option kann Dateien besser verarbeiten, Sie müssen jedoch ein neues Bild speichern.

Jeder Weg ist gut, wenn der Weg, den Sie gehen, für Ihren Anwendungsfall geeignet ist. Die Entscheidung hängt wirklich von Ihrem Fall und Ihrer Präferenz ab.

9
bennygenel

Sie können das ImageBackground-Tag des React-Native verwenden, da die Verwendung des Image-Tags als Container eine gelbe Box mit Warnung ergibt.

Der Beispielcode dafür mit Overlay ist unten dargestellt

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

Es wäre effizient, wenn Sie an demselben Bild arbeiten, indem Sie die flex -Eigenschaft in den Bildstilen ändern, oder Sie können position: absolute auf den Hauptbildcontainer setzen und top , bottom, left, right dem verschachtelten Container zuweisen.

Hilfreiche Links finden Sie hier

4
Pritish Vaidya

Ich untersuche, ob es mit React Native problemlos möglich ist oder ob ich eine native App erstellen sollte.

Das klingt in reaktiver Weise sehr machbar

Ich möchte ein Bild aus der Fotobibliothek bearbeiten und eine Textüberlagerung hinzufügen. Stellen Sie sich das wie eine Postkarte mit einer Grußbotschaft vor.

Ich denke, ich würde ALL die relevanten Metadaten als Objekt erfassen ...

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

Mit den obigen Details (und vielleicht mehr) können Sie die Konstruktionsabsicht auf jedem Gerät unabhängig von der Größe (Tablette vs. Mobiltelefon) oder der Pixeltiefe rekonstruieren. Die Variable boundingBox wird relativ zu den gerenderten Abmessungen des Bildes ausgedrückt. Im obigen Beispiel wäre die Nachricht in einem Textfeld nicht mehr als 30% der Bildbreite, 30% der Höhe und in der oberen linken Ecke positioniert. 

Wie füge ich einem Bild Text hinzu und erstelle eine neue Kopie in respons native? 

Dadurch entfällt die Notwendigkeit, Screenshots oder eigentliche Bildmanipulationen usw. vorzunehmen. Keine "neue Kopie". Behandeln Sie sie einfach als zwei separate und unterschiedliche Elemente und führen Sie sie dann beim Rendern mit den erfassten Metadaten zusammen. 

Abschließender Gedanke: Wenn Sie das fertige Foto auf einen Server "hochladen" müssen, wie Sie in einem anderen Kommentar zu einer anderen Lösung angegeben haben, können Sie diese Seite mit einer beliebigen Anzahl von Technologien unter Verwendung der Metadaten als Leitfaden verwenden. 

2
Chris Geirman

Sie können position: absolute verwenden, da das Hinzufügen von Kindern zu Image veraltet ist. Folgender Code richtet den Text in der Mitte (vertikal und horizontal) über dem Bild aus:

<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

Wenn Sie nur einen Text über dem Bild anzeigen müssen, können Sie das Bild in eine Ansicht einbetten und nach dem Bild ein Textelement mit position: 'absolute' einfügen. Wenn Sie eine Kopie des Bildes wünschen, das den Text enthält, können Sie dieselbe Vorgehensweise verwenden, aber einen Schnappschuss mit reagieren-native-view-shot erstellen.

1

Unter dem folgenden Code habe ich Text zu bestimmten Koordinaten im Bild hinzugefügt.

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

Und oben genannte Methode aufrufen 

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

Soweit ich weiß, kann die Bildkomponente als Container verwendet werden, sodass Sie Folgendes tun können:

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

Dies hängt vom Anwendungsfall ab. Wenn Sie jedoch einfach einen Text in ein Bild einfügen möchten, ist die Verwendung von ImageBackground eine gute Methode.

Mach es wie unten.

<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