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 HEX: #rgba | |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|

export enum ImageFormat {
  png = 'png',
  jpg = 'jpg',
  base64 = 'base64', // base64 string
}

export type TextMarkOption = {
  // image src, local image
  src: ImageSourcePropType,
  text: string,
  // if you set position you don't need to set X and Y
  X?: number,
  Y?: number,
  // eg. '#aacc22' '#aacc22af' '#acda' '#acd'
  color: string,
  fontName: string,
  fontSize: number,
  // scale image
  scale: number,
  // image quality
  quality: number,
  position?: Position,
  filename?: string,
  shadowStyle: ShadowLayerStyle,
  textBackgroundStyle: TextBackgroundStyle,
  saveFormat?: ImageFormat,
  maxSize?: number, // android only see #49 #42
}

• 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|

export type ImageMarkOption = {
  // image src, local image
  src: ImageSourcePropType,
  markerSrc: ImageSourcePropType,
  X?: number,
  Y?: number,
  // marker scale
  markerScale: number,
  // image scale
  scale: number,
  quality: number,
  position?: Position,
  filename?: string,
  saveFormat?: ImageFormat,
  maxSize?: number, // android only see #49 #42
}

• ShadowStyle

|name|description| |--|--| |radius| blur radius | |dx| x offset| |dy| y offset| |color| shadow color #rgba |

export type ShadowLayerStyle = {
  'dx': number,
  'dy': number,
  'radius': number,
  'color': string
}

• textBackgroundStyle

thanks @onka13 for #38

|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 #rgba |

export enum TextBackgroundType {
  stretchX = 'stretchX',
  stretchY = 'stretchY'
}

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', // '#ff0000aa' '#f0aa'
    fontName: 'Arial-BoldItalicMT',
    fontSize: 44,
    shadowStyle: {
        dx: 10.5,
        dy: 20.8,
        radius: 20.9,
        color: '#ff00ff' // '#ff00ffad'
    },
    textBackgroundStyle: {
        type: 'stretchX',
        paddingX: 10,
        paddingY: 10,
        color: '#0f0' // '#0f0a'
    },
    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
    saveFormat: 'png', 
}).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
    })
})

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 +

see

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

Example

example