react native image marker

Add text or icon watermarks to images

If this library is useful to you, please give me a ⭐️. 🤩

If there is any bug, please submit an issue 🐛, or create a pull request 🤓.

If there is any problem about using this library, please contact me, or open a QA discussion. 🤔

Features

Multiple text watermarks
Multiple icon watermarks
Rotating background and icon
Setting transparency for background and icon
Base64
Flexible text style settings, including:
- Rotating
- Shadow
- Background color
- Italic
- Bold
- Stroke
- Text align
- Padding
- Relative position
- Background border radius
Compatible with both Android and iOS
Expo

Installation

React Native

# npm
npm install react-native-image-marker --save

# yarn
yarn add react-native-image-marker

Expo

# install
npx expo install react-native-image-marker

# compile
npx expo prebuild

eas build

Compatibility

React Native Version	react-native-image-marker Version
>= 0.73.0, other cases	v1.2.0 or later
0.60.0 <= rn version < 0.73.0	v1.1.x
>= 0.60.0, iOS < 13, Android < N(API Level 24)	v1.0.x
< 0.60.0	v0.5.2 or earlier

Note: This table is only applicable to major versions of react-native-image-marker. Patch versions should be backwards compatible.

Usage

Text background fit

API

TextBackgroundType.none

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
const options = {
  // background image
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkTexts: [{
    text: 'text marker \n multiline text',
    position: {
      position: Position.topLeft,
    },
    style: {
      color: '#ff00ff',
      fontSize: 30,
      fontName: 'Arial',
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#008F6D',
      },
      textBackgroundStyle: {
        padding: '10% 10%',
        type: TextBackgroundType.none,
        color: '#0FFF00',
      },
    },
  }],
  scale: 1,
  quality: 100,
  filename: 'test',
  saveFormat: ImageFormat.png,
};
Marker.markText(options);

Text background stretchX

API

TextBackgroundType.stretchX

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
const options = {
  // background image
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkTexts: [{
    text: 'text marker \n multiline text',
    position: {
      position: Position.topLeft,
    },
    style: {
      color: '#FC0700',
      fontSize: 30,
      fontName: 'Arial',
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#008F6D',
      },
      textBackgroundStyle: {
        padding: '10% 10%',
        type: TextBackgroundType.stretchX,
        color: '#0FFF00',
      },
    },
  }],
  scale: 1,
  quality: 100,
  filename: 'test',
  saveFormat: ImageFormat.png,
};
Marker.markText(options);

Text background stretchY

API

TextBackgroundType.stretchY

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
const options = {
  // background image
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkTexts: [{
    text: 'text marker \n multiline text',
    position: {
      position: Position.topLeft,
    },
    style: {
      color: '#FC0700',
      fontSize: 30,
      fontName: 'Arial',
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#008F6D',
      },
      textBackgroundStyle: {
        padding: '10% 10%',
        type: TextBackgroundType.stretchY,
        color: '#0FFF00',
      },
    },
  }],
  scale: 1,
  quality: 100,
  filename: 'test',
  saveFormat: ImageFormat.png,
};
ImageMarker.markText(options);

Text background border radius

API

TextBackgroundType.cornerRadius

Sample

Example

example code

import Marker, { Position } from "react-native-image-marker"
···
const options = {
  // background image
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkTexts: [{
    text: 'text marker normal',
    position: {
      position: Position.center,
    },
    style: {
      color: '#FC0700',
      fontSize: 30,
      fontName: 'Arial',
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#008F6D',
      },
      textBackgroundStyle: {
        padding: '10%',
        color: '#0fA',
        cornerRadius: {
          topLeft: {
            x: '20%',
            y: '50%',
          },
          topRight: {
            x: '20%',
            y: '50%',
          },
        },
      },
    },
  }],
  scale: 1,
  quality: 100,
  filename: 'test',
  saveFormat: ImageFormat.png,
};
ImageMarker.markText(options);

Text with shadow

API

ShadowLayerStyle

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
const options = {
  // background image
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkTexts: [{
    text: 'text marker \n multiline text',
    position: {
      position: Position.topLeft,
    },
    style: {
      color: '#F4F50A',
      fontSize: 30,
      fontName: 'Arial',
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#6450B0',
      },
    },
  }],
  scale: 1,
  quality: 100,
  filename: 'test',
  saveFormat: ImageFormat.png,
};
Marker.markText(options);

Multiple text watermarks

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markText({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  waterMarkTexts: [{
    text: 'hello world \n 你好',
    position: {
      position: Position.topLeft,
    },
    style: {
      color: '#BB3B20',
      fontSize: 30,
      fontName: 'Arial',
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#0FFF00',
      },
    },
  }, {
    text: 'text marker normal',
    position: {
      position: Position.topRight,
    },
    style: {
      color: '#6450B0',
      fontSize: 30,
      fontName: 'Arial',
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#02FBBE',
      },
    },
  }],
})

Text rotation

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markText({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
    rotate: 30,
  },
  waterMarkTexts: [{
    text: 'hello world \n 你好',
    position: {
      position: Position.topLeft,
    },
    style: {
      color: '#FFFF00',
      fontSize: 30,
      fontName: 'Arial',
      rotate: 30,
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#02B96B',
      },
      strikeThrough: true,
      underline: true,
    },
  }, {
    text: 'text marker normal',
    position: {
      position: Position.center,
    },
    style: {
      color: '#FFFF00',
      fontSize: 30,
      fontName: 'Arial',
      rotate: 30,
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#0FFF00',
      },
      strikeThrough: true,
      underline: true,
    },
  }],
})

Icon watermarks

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
  }],
})

Multiple icon watermarks

Note: require Android >= N, iOS >= iOS 13

API

markImage

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
  }, {
    src: require('./images/watermark1.png'),
    position: {
      position: Position.topRight,
    },
  }, {
    src: require('./images/watermark2.png'),
    position: {
      position: Position.bottomCenter,
    },
  }],
})

Background rotation

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
    rotate: 30,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
  }],
});

Marker.markText({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
    rotate: 30,
  },
  watermarkTexts: [{
    text: 'hello world \n 你好',
    position: {
      position: Position.topLeft,
    },
    style: {
      color: '#FFFF00',
      fontSize: 30,
      fontName: 'Arial',
      rotate: 30,
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#02B96B',
      },
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#008F6D',
      },
      strikeThrough: true,
      underline: true,
    },
  }, {
    text: 'hello world \n 你好',
    position: {
      position: Position.center,
    },
    style: {
      color: '#FFFF00',
      fontSize: 30,
      fontName: 'Arial',
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#0FFF00',
      },
      strikeThrough: true,
      underline: true,
    },
  }],
})

Icon rotation

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
    rotate: 30,
  }],
});

Transparent background

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
    alpha: 0.5,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
  }],
});

Transparent icon

Sample

Example

example code

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
    alpha: 0.5,
  }],
});

API

the latest version
v1.1.x
v1.0.x
If you are using a version lower than 1.0.0, please go to v0.9.2

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 @vioku

Examples

React Native

example

If you want to run the example locally, you can do the following:

git clone [email protected]:JimmyDaddy/react-native-image-marker.git

cd ./react-native-image-marker

# install dependencies
yarn

# Android
# Open an android emulator or connect a real device at first
yarn example android

# iOS
yarn example ios

Expo

expo-example

If you want to run the example locally, you can do the following:

git clone [email protected]:JimmyDaddy/react-native-image-marker.git

cd ./react-native-image-marker

# Expo
# install dependencies
yarn

# Android
# Open an android emulator or connect a real device at first
yarn expo-example android

# iOS
yarn expo-example ios

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

If this library is useful to you, please give me a ⭐️. 🤩
If there is any bug, please submit an issue 🐛, or create a pull request 🤓.
If there is any problem about using this library, please contact me, or open a QA discussion. 🤔

Made with create-react-native-library

Name		Name	Last commit message	Last commit date
Latest commit History 218 Commits
.github		.github
android		android
assets		assets
docs		docs
example		example
expo-example		expo-example
ios		ios
scripts		scripts
src		src
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.gitattributes		.gitattributes
.gitignore		.gitignore
.markdownlint.json		.markdownlint.json
.npmignore		.npmignore
.nvmrc		.nvmrc
.watchmanconfig		.watchmanconfig
.yarnrc		.yarnrc
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.0.9.2.MD		README.0.9.2.MD
README.1.1.x.MD		README.1.1.x.MD
README.MD		README.MD
_config.yml		_config.yml
app.plugin.js		app.plugin.js
babel.config.js		babel.config.js
lefthook.yml		lefthook.yml
package.json		package.json
react-native-image-marker.podspec		react-native-image-marker.podspec
tsconfig.build.json		tsconfig.build.json
tsconfig.doc.json		tsconfig.doc.json
tsconfig.json		tsconfig.json

License

JimmyDaddy/react-native-image-marker

Folders and files

Latest commit

History

Repository files navigation

react native image marker

Add text or icon watermarks to images

Table of Contents

Features

Installation

React Native

Expo

Compatibility

Usage

Text background fit

API

Sample

Example

Text background stretchX

API

Sample

Example

Text background stretchY

API

Sample

Example

Text background border radius

API

Sample

Example

Text with shadow

API

Sample

Example

Multiple text watermarks

Sample

Example

Text rotation

Sample

Example

Icon watermarks

Sample

Example

Multiple icon watermarks

API

Sample

Example

Background rotation

Sample

Example

Icon rotation

Sample

Example

Transparent background

Sample

Example

Transparent icon

Sample

Example

API

Save image to file

Contributors

Examples

React Native

Expo

Contributing

License

About

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases 43

Packages 0

Contributors 11

Languages

Packages