Skip to content

Home

Jump to bottom
JimmyDaddy edited this page Sep 22, 2023 · 4 revisions
react native image marker Logo

react native image marker

Add text or icon watermarks to images

npm version npm stars forksgithub PRs Welcome license

Features

  • Add multiple text watermarks to images
  • Add multiple icon watermarks to images (Android >= N, iOS >= iOS 13)
  • Support rotating background image and icon watermarks.
  • Support setting opacity for background image and icon watermarks.
  • Support base64 format
  • Flexible text style settings
    • rotating
    • text shadow
    • background color
    • italic
    • bold
    • stroke
    • text align
  • Compatible with both Android and iOS

Samples

Compatibility

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

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

Installation

  • npm install react-native-image-marker --save
  • link
    • react-native link (RN version < 0.60.0)
    • auto link(RN version > 0.60.0)

RN version < 0.60.0 please use v0.5.2 or older

iOS Pod Install (RN version < 0.60.0)

You can use pod instead of link. Add following lines in your Podfile:

pod 'RNImageMarker', :path => '../node_modules/react-native-image-marker'

Usage

Text watermarks

import Marker from "react-native-image-marker"

···
// add text watermark to a photo
const options = {
 backgroundImage: {
  src: require('./images/test.jpg'),
  scale: 1,
  rotate: 20,
  alpha: 0.5,
 },
 // support multiple texts
 watermarkTexts: [{
   text: 'hello',
   positionOptions: {
     position: Position.center,
   },
   style: {
     color: '#ff00ff',
     fontSize: 30,
     fontName: 'Arial',
     rotate: 30,
     shadowStyle: {
       dx: 10,
       dy: 10,
       radius: 10,
       color: '#ffaa22',
     },
     textBackgroundStyle: {
       paddingX: 10,
       paddingY: 10,
       type: TextBackgroundType.none,
       color: '#faaaff',
     },
     underline: true,
     strikeThrough: true,
     textAlign: 'left',
     italic: true,
     bold: true,
   },
 }, {
   text: 'world',
   positionOptions: {
     X: 10,
     Y: 10,
   },
   style: {
    color: '#AAFFDD',
    fontSize: 30,
    fontName: 'Arial',
    rotate: 170,
    shadowStyle: {
     dx: 10,
     dy: 10,
     radius: 10,
     color: '#ffaa22',
    },
    textBackgroundStyle: {
     paddingX: 10,
     paddingY: 10,
     type: TextBackgroundType.stretchX,
     color: '#faaaff',
    },
    textAlign: 'right',
    skewX: 10,
   },
 }],
 scale: 1,
 quality: 100,
 filename: 'test',
 saveFormat: ImageFormat.png,
 maxSize: 1000,
};
ImageMarker.markText(options).then((res) => {
 console.log(res);
}).catch((err) => {
 console.log(err);
});
// or
await ImageMarker.markText(options);

Icon watermarks

import Marker from "react-native-image-marker"

···
// add icon watermark to a background image
const options = {
 backgroundImage: {
   src: require('./images/test.jpg'),
   scale: 1,
   rotate: 20,
   alpha: 0.5,
 },
 // support multiple icons, iOS >= 13, Android >= N(API Level 24)
 watermarkImages: [{
   src: require('./images/watermark.png'),
   scale: 1,
   rotate: 20,
   alpha: 0.5,
   position: {
    position: Position.center,
   }
 }, {
  src: require('./images/watermark1.png'),
   scale: 1,
   rotate: 20,
   alpha: 0.5,
   position: {
    X: 20,
    Y: 20,
   }
 }],
 quality: 100,
 filename: 'test',
 saveFormat: ImageFormat.png,
 maxSize: 1000,
};
ImageMarker.markImage(options).then((res) => {
 console.log(res);
}).catch((err) => {
 console.log(err);
});
// or
await ImageMarker.markImage(options);

API

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 +

ref

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

Examples

examples

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

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

# iOS
yarn example ios

Contributing

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

License

MIT

Made with create-react-native-library

Clone this wiki locally