v1.0.x

react-native-image-marker

Add text or icon watermark to your images

Features

• Add multiple text watermarks to images
• Add icon watermark to images
• Support rotating background images and image watermarks.
• Support setting opacity for background images and image watermarks.
• Support base64
• flexible text style settings
  • rotating
  • text shadow
  • background color
  • italic
  • bold
  • stroke
  • text align
• Compatible with both Android and iOS

sample

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,
 },
 watermarkImage: {
   src: require('./images/watermark.png'),
   scale: 1,
   rotate: 20,
   alpha: 0.5,
 },
 watermarkPositions: {
   position: Position.center,
 },
 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

the latest version

If you are using a version lower than 1.0.0, please go to v0.9.2

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

Example

example

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