react-native-image-marker
Add text or icon watermark to your images
sample
Installation
RN version < 0.60.0 please use v0.5.2 or older
- 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 |
saveFormat |
png jpg base64 |
textBackgroundStyle |
text background style |
maxSize |
default value is 2048, need RN version >= 0.60.0, fresco MaxBitmapSize ImagePipelineConfig.Builder.experiment().setMaxBitmapSize() , see #49 |
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 |
saveFormat |
png jpg base64 , default is jpg |
maxSize |
default value is 2048, need RN version >= 0.60.0, fresco MaxBitmapSize ImagePipelineConfig.Builder.experiment().setMaxBitmapSize() , see #49 |
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
···// add text watermark to a photo this Marker ···thisMarker // add icon watermark to a photo const iconUri = iconuriconst backGroundUri = imgurithis Marker Marker // you can also add watermark to a photo with static imagesMarker// or base64Marker
Extra about Android decoding image
This library use Fresco to decode image on Android. You can set your configuration through Configure Fresco in React Native
- RN version < 0.60.0 use fresco v1.10.0
- RN version >= 0.60.0 use fresco v2.0.0 +
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