react-native-image-marker 
Add text or icon watermark to your images
sample
聽
Installation
- npm install react-native-image-marker --save
- react-native link
iOS Pod Install
You can use pod instead of link. Add following lines in your Podfile:
pod 'RNImageMarker', :path => '../node_modules/react-native-image-marker'API
| name | parameter | return | decription |
|---|---|---|---|
markText | TextMarkOption | Promise<String> | mark image with text |
markImage | ImageMarkOption | Promise<String> | mark image with icon |
TextMarkOption
| name | description |
|---|---|
src | image url |
text | the text you want to mark with |
position | text position(topLeft,topRight,topCenter, center, bottomLeft, bottomCenter, bottomRight) |
X | distance from the left, if you have set position yet you don't need to set this property again |
Y | distance from the top, if you have set position you don't need to set this property again |
color | text color |
fontName | fontName |
fontSize | fontSize |
shadowStyle | text's shadow style: iOS's NSShadowAttributeName, Android's textPaint.shadowLayerStyle |
scale | scale image |
quality | image qulaity |
filename | set filename for the result |
textBackgroundStyle | text background style |
ImageMarkOption
| name | description |
|---|---|
src | image url |
markerSrc | the icon you want to mark with |
position | text position(topLeft,topRight,topCenter, center, bottomLeft, bottomCenter, bottomRight) |
X | distance from the left, if you have set position yet you don't need to set this property again |
Y | distance from the top, if you have set position you don't need to set this property again |
markerScale | scale icon |
scale | scale image |
quality | image qulaity |
filename | set filename for the result |
ShadowStyle
| name | description |
|---|---|
radius | blur radius |
dx | x offset |
dy | y offset |
color | shadow color |
textBackgroundStyle
| name | description |
|---|---|
paddingX | padding X |
paddingY | padding y |
type | default is fit the text, stretchX stretch to fill width, stretchY stretch to fill height |
color | bg color |
Usage
import ImageMarker from "react-native-image-marker" 路路路 // add text watermark to a photo this.setState({ loading: true }) Marker.markText({ src: img.uri, text: 'text marker', X: 30, Y: 30, color: '#FF0000', fontName: 'Arial-BoldItalicMT', fontSize: 44, shadowStyle: { dx: 10.5, dy: 20.8, radius: 20.9, color: '#ff00ff' }, textBackgroundStyle: { type: 'stretchX', paddingX: 10, paddingY: 10, color: '#0f0' }, scale: 1, quality: 100 }).then((res) => { this.setState({ loading: false, markResult: res }) console.log("the path is"+res) }).catch((err) => { console.log(err) this.setState({ loading: false, err }) }) 路路路 this.setState({ loading: true }) Marker.markText({ src: img.uri, text: 'text marker', position: 'topLeft', color: '#FF0000', fontName: 'Arial-BoldItalicMT', fontSize: 44, scale: 1, quality: 100 }).then((res) => { console.log("the path is"+res) this.setState({ loading: false, markResult: res }) }).catch((err) => { console.log(err) this.setState({ loading: false, err }) }) // add icon watermark to a photo const iconUri = icon.uri const backGroundUri = img.uri this.setState({ loading: true }) Marker.markImage({ src: backGroundUri, markerSrc: iconUri, // icon uri X: 100, // left Y: 150, // top scale: 1, // scale of bg markerScale: 0.5, // scale of icon quality: 100 // quality of image }).then((path) => { this.setState({ uri: Platform.OS === 'android' ? 'file://' + path : path, loading: false }) }).catch((err) => { console.log(err, 'err') this.setState({ loading: false, err }) }) Marker.markImage({ src: backGroundUri, markerSrc: iconUri, position: 'topLeft', // topLeft, topCenter,topRight, bottomLeft, bottomCenter , bottomRight, center scale: 1, markerScale: 0.5, quality: 100 }).then((path) => { this.setState({ uri: Platform.OS === 'android' ? 'file://' + path : path, loading: false }) }).catch((err) => { console.log(err, 'err') this.setState({ loading: false, err }) }) // you can also add watermark to a photo with static images Marker.markImage({ src: backGroundUri, markerSrc: require('./icon.png'), position: 'topLeft', // topLeft, topCenter,topRight, bottomLeft, bottomCenter , bottomRight, center scale: 1, markerScale: 0.5, quality: 100 }).then((path) => { this.setState({ uri: Platform.OS === 'android' ? 'file://' + path : path, loading: false }) }).catch((err) => { console.log(err, 'err') this.setState({ loading: false, err }) }) // or base64 Marker.markImage({ src: { uri: `data:img/jpg;base64,/9j/4qqqAQSkZJRgABAQEBLAEsAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAHnAooDASIA AhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgddddcI` }, markerSrc: { uri: `data:img/jpg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAHnAooDASIA AhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcI` }, position: 'topLeft', // topLeft, topCenter,topRight, bottomLeft, bottomCenter , bottomRight, center scale: 1, markerScale: 0.5, quality: 100 }).then((path) => { this.setState({ uri: Platform.OS === 'android' ? 'file://' + path : path, loading: false }) }).catch((err) => { console.log(err, 'err') this.setState({ loading: false, err }) }) Save image to file
- If you want to save the new image result to the phone camera roll, just use the CameraRoll-module from react-native.
- If you want to save it to an arbitrary file path, use something like react-native-fs.
- For any more advanced needs, you can write your own (or find another) native module that would solve your use-case.
Contributors
@filipef101 @mikaello @Peretz30 @gaoxiaosong @onka13 @OrangeFlavoredColdCoffee
