Nourishing Pear Medley

    react-native-image-marker
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.3 • Public • Published

    react-native-image-marker npm version PRs Welcome

    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

    Install

    npm i react-native-image-marker

    DownloadsWeekly Downloads

    6,969

    Version

    0.6.3

    License

    ISC

    Unpacked Size

    114 kB

    Total Files

    32

    Last publish

    Collaborators

    • jimmydaddy