如何將文本添加到React Native中的圖像？

我在研究React Native是否容易實現，或者我是否應該構建本機應用程序。如何將文本添加到React Native中的圖像？

我想編輯圖片庫中的圖片，併爲其添加文字覆蓋。把它想象成一張帶有問候信息的明信片。

如何將文本添加到圖像中並在原生反應中製作新的副本？我不在尋找詳細的代碼，只是爲了解釋如何開始。

更新： 這是一個很好的選擇，只保存圖片上的消息座標，而不是生成一個新的圖像？

來源

2017-10-05 crispychicken

如果您只需要在圖像上顯示文字，您可以在圖像中包裹圖像，然後在圖像中插入文字元素position: 'absolute'。如果你想要一個包含文本的圖像副本，那麼你可以使用相同的方法，但使用react-native-view-shot

來源

2017-10-05 16:57:16

好主意，但我認爲圖像質量會更差，圖像尺寸會降低到手機像素尺寸... – crispychicken

該應用的目的是什麼？ –

在帶有問候消息的平板電腦上顯示明信片。所以圖像質量應該針對平板電腦尺寸進行優化。圖片是用手機制作的。 – crispychicken

你可以用2種方式。您可以在圖像組件上渲染文本並保存該文本的位置，也可以處理圖像並使用文本獲取新圖像。

第一個選項提出了該位置相對於圖像大小的問題。意思是如果圖像在不同尺寸的屏幕上呈現，文字的位置和大小也應相應地移動。這個選項需要一個好的計算算法。另外，另一個問題可能是渲染時間。文本組件將立即渲染，但圖像組件需要首先加載圖像。這個選項也需要一個很好的渲染算法。

如果沒有第三方庫或一定程度的本機代碼，第二種選擇是不可能的，因爲react-native不支持超出CSS限制的圖像處理。一個好的和維護的圖像處理庫是gl-react-native-v2。該庫可以幫助您按照需要處理和操作圖像，然後使用captureFrame(config)保存結果。此選項更能夠處理文件，但需要您保存新圖像。

無論哪種方式都很好，如果你的方式適合你的用例。這個決定真的取決於你的情況和偏好。

來源

2017-10-09 10:05:21 bennygenel

好的答案。所以你會推薦'gl-react-native'來製作快照，用'react-native-view-shot' – crispychicken

@crispychicken謝謝。我不能特別推薦一個圖書館。如果另一個圖書館對你更好，或更好地使用你的案例，你應該去那裏。 gl-react-native只是圖像處理庫的一個例子。 – bennygenel

據我所知，圖像組件可以作爲一個容器，這樣你可以做這樣的事情：

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

來源

2017-10-11 00:27:08 justelouise

他需要將編輯後的圖像上傳到服務器。另外，將圖像添加到圖像已被棄用。 –

你可以使用反應本地的ImageBackground標記，因爲使用Image標籤的容器會給你一個黃色框警告。

是如下圖所示

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

它與覆蓋的示例代碼，如果你在樣式的圖像的改變彎曲性能在同一圖像上工作，或者你可以通過設置position: absolute這將是有效的到主圖像容器並將top , bottom, left, right分配給嵌套容器。

有用的鏈接，可以發現here

來源

2017-10-11 13:03:21

下面的代碼是我用在圖像特定座標上的圖像添加文字。

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

並調用上述方法如下

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

來源

2017-10-11 15:08:38

有許多可用於幾個庫。如果你想添加文字到圖片上，你可以使用：react-native-media-editor。這是向圖片添加文字的不錯選擇，但我建議您react-native-image-tools。它提供了非常多的靈活性。您可以添加一個文本並相應地定位它。除此之外，還有過濾器，裁剪選項，燈光調整等等。

來源

2017-10-12 12:58:07

我在研究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％，並位於左上角。

我該如何向圖像添加文本並在原生反應中製作新副本？

這消除了做任何截圖或實際圖像操作等的需要。無需「製作新副本」。只要將它們視爲兩個單獨且不同的資產，然後使用您捕獲的元數據在渲染時合併它們。最終想法：如果您需要「將完成的照片上傳到服務器」，如您在另一個解決方案的其他評論中所述，那麼您可以使用任何數量的使用元數據作爲指南的技術來執行此服務器。

來源

2017-10-13 16:03:42

我相信你的boundigBox邏輯有一些流量。雖然就像你所說的，如果你給框賦予相對大小，文本的大小總是用'fontSize'設置。 – bennygenel

@bennygenel感謝您的反饋。我不確定你的意思是「有一些流量」。當然，'fontSize'也必須是相對的，但我認爲這個概念仍然傳達着，不是嗎？ –

調整fontSize將需要計算，涉及圖像的原始大小和圖像的當前視圖大小。您需要計算更改的比率，然後設置fontSize。定位也是一樣的。您應該調整相對於新尺寸的位置。例如，如果文本從'x：100'開始爲500px圖像，它應該從x：50開始爲250px。 – bennygenel

如何將文本添加到React Native中的圖像？

回答

相關問題