{"id":15364415,"url":"https://github.com/jimmydaddy/react-native-image-marker","last_synced_at":"2025-04-08T04:14:35.873Z","repository":{"id":45347837,"uuid":"83907794","full_name":"JimmyDaddy/react-native-image-marker","owner":"JimmyDaddy","description":"🙈Adding text or icon watermark to your image using React Native👀👀","archived":false,"fork":false,"pushed_at":"2024-07-27T07:00:43.000Z","size":51947,"stargazers_count":332,"open_issues_count":15,"forks_count":101,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-01T03:34:23.608Z","etag":null,"topics":["android","icon-watermark","image","ios","mark","photo","react-native","reactnative","text","watermark"],"latest_commit_sha":null,"homepage":"https://jimmydaddy.github.io/react-native-image-marker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JimmyDaddy.png","metadata":{"files":{"readme":"README.0.9.2.MD","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-04T16:33:14.000Z","updated_at":"2025-03-15T04:02:59.000Z","dependencies_parsed_at":"2023-09-22T22:52:30.798Z","dependency_job_id":"9b323199-5c45-4222-9602-5781f067744e","html_url":"https://github.com/JimmyDaddy/react-native-image-marker","commit_stats":{"total_commits":206,"total_committers":13,"mean_commits":"15.846153846153847","dds":0.08252427184466016,"last_synced_commit":"d6e8744a6cb097d19a4c4d0368664eb960acc76a"},"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JimmyDaddy%2Freact-native-image-marker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JimmyDaddy%2Freact-native-image-marker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JimmyDaddy%2Freact-native-image-marker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JimmyDaddy%2Freact-native-image-marker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JimmyDaddy","download_url":"https://codeload.github.com/JimmyDaddy/react-native-image-marker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773719,"owners_count":20993639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","icon-watermark","image","ios","mark","photo","react-native","reactnative","text","watermark"],"created_at":"2024-10-01T13:11:42.036Z","updated_at":"2025-04-08T04:14:35.852Z","avatar_url":"https://github.com/JimmyDaddy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-image-marker ![npm version](https://badge.fury.io/js/react-native-image-marker.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/JimmyDaddy/react-native-image-marker/pulls)\n\nAdd text or icon watermark to your images\n\n## sample\n\n\u003cp\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/IOSMarker.gif\" width='200'\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/AndroidMarker.gif\" width='200'\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow_bg_fit.png\" width='200'\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow_bg_sx.png\" width='200'\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow.png\" width='200'\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow_bg_sy.png\" width='200'\u003e\n\u003c/p\u003e\n\n## Installation\n\n**RN version \u003c 0.60.0 please use v0.5.2 or older**\n\n* npm install react-native-image-marker --save\n* link\n    * react-native link (RN version \u003c 0.60.0)\n    * [auto link](https://github.com/react-native-community/cli/blob/main/docs/autolinking.md)(RN version \u003e 0.60.0)\n\n### iOS Pod Install (RN version \u003c 0.60.0)\n\nYou can use `pod` instead of `link`. Add following lines in your `Podfile`:\n\n```shell\npod 'RNImageMarker', :path =\u003e '../node_modules/react-native-image-marker'\n```\n\n## API \n\n|name|parameter|return|decription|\n|--|--|--|--|\n|`markText`|`TextMarkOption`|`Promise\u003cString\u003e`|mark image with text|\n|`markImage`|`ImageMarkOption`|`Promise\u003cString\u003e`| mark image with icon|\n\n* `TextMarkOption`\n\n|name|description|\n|--|--|\n|`src`|image url |\n|`text`|the text you want to mark with|\n|`position`| text position(`topLeft`,`topRight`,`topCenter`, `center`, `bottomLeft`, `bottomCenter`, `bottomRight`)|\n|`X`|distance from the left, **if you have set `position` yet you don't need to set this property again**|\n|`Y`|distance from the top, **if you have set `position` you don't need to set this property again**|\n|`color`| text color HEX: #rgba |\n|`fontName`| fontName |\n|`fontSize`| fontSize |\n|`shadowStyle`| text's shadow style: iOS's `NSShadowAttributeName`, Android's `textPaint.shadowLayerStyle` |\n|`scale`| scale image |\n|`quality`| image qulaity |\n|`filename` | set filename for the result |\n|`saveFormat`| `png` `jpg` `base64` |\n|`textBackgroundStyle` | text background style |\n|`maxSize`| default value is 2048, **need RN version \u003e= 0.60.0**,  fresco `MaxBitmapSize` [`ImagePipelineConfig.Builder.experiment().setMaxBitmapSize()`](https://github.com/facebook/fresco/blob/08ca5f40cc0b60b4db16d15e45552cafeae39ccb/imagepipeline/src/main/java/com/facebook/imagepipeline/core/ImagePipelineExperiments.java#L282), see [#49](https://github.com/JimmyDaddy/react-native-image-marker/issues/49#issuecomment-535303838)|\n\n```typescript\n\nexport enum ImageFormat {\n  png = 'png',\n  jpg = 'jpg',\n  base64 = 'base64', // base64 string\n}\n\nexport type TextMarkOption = {\n  // image src, local image\n  src: ImageSourcePropType,\n  text: string,\n  // if you set position you don't need to set X and Y\n  X?: number,\n  Y?: number,\n  // eg. '#aacc22' '#aacc22af' '#acda' '#acd'\n  color: string,\n  fontName: string,\n  fontSize: number,\n  // scale image\n  scale: number,\n  // image quality\n  quality: number,\n  position?: Position,\n  filename?: string,\n  shadowStyle: ShadowLayerStyle,\n  textBackgroundStyle: TextBackgroundStyle,\n  saveFormat?: ImageFormat,\n  maxSize?: number, // android only see #49 #42\n}\n```\n\n* `ImageMarkOption`\n\n|name|description|\n|--|--|\n|`src`|image url |\n|`markerSrc`|the icon you want to mark with |\n|`position`| text position(`topLeft`,`topRight`,`topCenter`, `center`, `bottomLeft`, `bottomCenter`, `bottomRight`)|\n|`X`|distance from the left, **if you have set `position` yet you don't need to set this property again**|\n|`Y`|distance from the top, **if you have set `position` you don't need to set this property again**|\n|`markerScale`| scale icon |\n|`scale`| scale image |\n|`quality`| image qulaity |\n|`filename` | set filename for the result |\n|`saveFormat`| `png`  `jpg` `base64`,  default is `jpg` |\n|`maxSize`| default value is 2048, **need RN version \u003e= 0.60.0**,  fresco `MaxBitmapSize` [`ImagePipelineConfig.Builder.experiment().setMaxBitmapSize()`](https://github.com/facebook/fresco/blob/08ca5f40cc0b60b4db16d15e45552cafeae39ccb/imagepipeline/src/main/java/com/facebook/imagepipeline/core/ImagePipelineExperiments.java#L282), see [#49](https://github.com/JimmyDaddy/react-native-image-marker/issues/49#issuecomment-535303838)|\n\n```typescript\nexport type ImageMarkOption = {\n  // image src, local image\n  src: ImageSourcePropType,\n  markerSrc: ImageSourcePropType,\n  X?: number,\n  Y?: number,\n  // marker scale\n  markerScale: number,\n  // image scale\n  scale: number,\n  quality: number,\n  position?: Position,\n  filename?: string,\n  saveFormat?: ImageFormat,\n  maxSize?: number, // android only see #49 #42\n}\n```\n\n* `ShadowStyle`\n\n|name|description|\n|--|--|\n|`radius`| blur radius |\n|`dx`| x offset|\n|`dy`| y offset|\n|`color`| shadow color #rgba |\n\n```typescript\nexport type ShadowLayerStyle = {\n  'dx': number,\n  'dy': number,\n  'radius': number,\n  'color': string\n}\n```\n\n* `textBackgroundStyle`\n\n\u003e thanks [@onka13](https://github.com/onka13) for [#38](https://github.com/JimmyDaddy/react-native-image-marker/pull/38)\n\n|name|description|\n|--|--|\n|`paddingX`| padding X |\n|`paddingY`| padding y|\n|`type`| default is fit the text, `stretchX` stretch to fill width, `stretchY` stretch to fill height |\n|`color`| bg color #rgba |\n\n```typescript\nexport enum TextBackgroundType {\n  stretchX = 'stretchX',\n  stretchY = 'stretchY'\n}\n```\n\n## Usage\n\n```javascript\n\nimport ImageMarker from \"react-native-image-marker\"\n\n···\n// add text watermark to a photo\n\n this.setState({\n    loading: true\n })\n Marker.markText({\n    src: img.uri,\n    text: 'text marker', \n    X: 30,\n    Y: 30, \n    color: '#FF0000', // '#ff0000aa' '#f0aa'\n    fontName: 'Arial-BoldItalicMT',\n    fontSize: 44,\n    shadowStyle: {\n        dx: 10.5,\n        dy: 20.8,\n        radius: 20.9,\n        color: '#ff00ff' // '#ff00ffad'\n    },\n    textBackgroundStyle: {\n        type: 'stretchX',\n        paddingX: 10,\n        paddingY: 10,\n        color: '#0f0' // '#0f0a'\n    },\n    scale: 1, \n    quality: 100\n }).then((res) =\u003e {\n     this.setState({\n        loading: false,\n        markResult: res\n     })\n    console.log(\"the path is\"+res)\n }).catch((err) =\u003e {\n    console.log(err)\n    this.setState({\n        loading: false,\n        err\n    })\n })\n\n···\nthis.setState({\n    loading: true\n})\nMarker.markText({\n    src: img.uri,\n    text: 'text marker', \n    position: 'topLeft', \n    color: '#FF0000',\n    fontName: 'Arial-BoldItalicMT', \n    fontSize: 44, \n    scale: 1, \n    quality: 100\n}).then((res) =\u003e {\n    console.log(\"the path is\"+res)\n    this.setState({\n        loading: false,\n        markResult: res\n    })\n}).catch((err) =\u003e {\n    console.log(err)\n    this.setState({\n        loading: false,\n        err\n    })\n})\n\n// add icon watermark to a photo\n\nconst iconUri = icon.uri\nconst backGroundUri = img.uri\nthis.setState({\n    loading: true\n})\n\nMarker.markImage({\n    src: backGroundUri, \n    markerSrc: iconUri, // icon uri\n    X: 100, // left\n    Y: 150, // top\n    scale: 1, // scale of bg\n    markerScale: 0.5, // scale of icon\n    quality: 100, // quality of image\n    saveFormat: 'png', \n}).then((path) =\u003e {\n    this.setState({\n        uri: Platform.OS === 'android' ? 'file://' + path : path,\n        loading: false\n    })\n}).catch((err) =\u003e {\n    console.log(err, 'err')\n    this.setState({\n        loading: false,\n        err\n    })\n})\n\nMarker.markImage({\n    src: backGroundUri, \n    markerSrc: iconUri, \n    position: 'topLeft',  // topLeft, topCenter,topRight, bottomLeft, bottomCenter , bottomRight, center\n    scale: 1, \n    markerScale: 0.5, \n    quality: 100\n}).then((path) =\u003e {\n    this.setState({\n        uri: Platform.OS === 'android' ? 'file://' + path : path,\n        loading: false\n    })\n}).catch((err) =\u003e {\n    console.log(err, 'err')\n     this.setState({\n        loading: false,\n        err\n    })\n})\n\n// you can also add watermark to a photo with static images\nMarker.markImage({\n    src: backGroundUri, \n    markerSrc: require('./icon.png'), \n    position: 'topLeft',  // topLeft, topCenter,topRight, bottomLeft, bottomCenter , bottomRight, center\n    scale: 1, \n    markerScale: 0.5, \n    quality: 100\n}).then((path) =\u003e {\n    this.setState({\n        uri: Platform.OS === 'android' ? 'file://' + path : path,\n        loading: false\n    })\n}).catch((err) =\u003e {\n    console.log(err, 'err')\n     this.setState({\n        loading: false,\n        err\n    })\n})\n// or base64\nMarker.markImage({\n    src: { uri: `data:img/jpg;base64,/9j/4qqqAQSkZJRgABAQEBLAEsAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAHnAooDASIA\nAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgddddcI` }, \n    markerSrc: { uri: `data:img/jpg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAHnAooDASIA\nAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcI` }, \n    position: 'topLeft',  // topLeft, topCenter,topRight, bottomLeft, bottomCenter , bottomRight, center\n    scale: 1, \n    markerScale: 0.5, \n    quality: 100\n}).then((path) =\u003e {\n    this.setState({\n        uri: Platform.OS === 'android' ? 'file://' + path : path,\n        loading: false\n    })\n}).catch((err) =\u003e {\n    console.log(err, 'err')\n     this.setState({\n        loading: false,\n        err\n    })\n})\n\n```\n\n## Extra about Android decoding image\n\nThis library use [Fresco](https://github.com/facebook/fresco) to decode image on Android. You can set your configuration through [Configure Fresco in React Native](https://medium.com/in-the-hudl/configure-fresco-in-react-native-28c2bc7dcc4d)\n\n* RN version \u003c 0.60.0 use fresco v1.10.0\n* RN version \u003e= 0.60.0 use fresco v2.0.0 +\n\n[see](https://github.com/facebook/react-native/blob/8cf9505bd27c5dade33b17cc177fa5ef1613dbcd/ReactAndroid/gradle.properties#L15)\n\n## Save image to file\n\n* If you want to save the new image result to the phone camera roll, just use the [CameraRoll-module from react-native](https://facebook.github.io/react-native/docs/cameraroll.html#savetocameraroll).\n* If you want to save it to an arbitrary file path, use something like [react-native-fs](https://github.com/itinance/react-native-fs).\n* For any more advanced needs, you can write your own (or find another) native module that would solve your use-case.\n\n## Contributors\n\n[@filipef101](https://github.com/filipef101)\n[@mikaello](https://github.com/mikaello)\n[@Peretz30](https://github.com/Peretz30)\n[@gaoxiaosong](https://github.com/gaoxiaosong)\n[@onka13](https://github.com/onka13)\n[@OrangeFlavoredColdCoffee](https://github.com/OrangeFlavoredColdCoffee)\n\n## Example\n\n[example](https://github.com/JimmyDaddy/react-native-image-marker/tree/master/example)\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimmydaddy%2Freact-native-image-marker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjimmydaddy%2Freact-native-image-marker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimmydaddy%2Freact-native-image-marker/lists"}