{"id":50448743,"url":"https://github.com/daboss2003/capacitor-image-marker","last_synced_at":"2026-05-31T23:03:47.889Z","repository":{"id":357164248,"uuid":"1235664225","full_name":"daboss2003/capacitor-image-marker","owner":"daboss2003","description":"Watermark images with text or other images from Capacitor — multi-line text, shadows, rounded backgrounds, rotation, alpha. Web + iOS + Android.","archived":false,"fork":false,"pushed_at":"2026-05-11T16:02:04.000Z","size":490,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-11T17:14:45.743Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@daboss2003/capacitor-image-marker","language":"Swift","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/daboss2003.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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,"zenodo":null,"notice":"NOTICE","maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-11T14:36:01.000Z","updated_at":"2026-05-11T16:13:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/daboss2003/capacitor-image-marker","commit_stats":null,"previous_names":["daboss2003/capacitor-image-marker"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/daboss2003/capacitor-image-marker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daboss2003%2Fcapacitor-image-marker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daboss2003%2Fcapacitor-image-marker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daboss2003%2Fcapacitor-image-marker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daboss2003%2Fcapacitor-image-marker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daboss2003","download_url":"https://codeload.github.com/daboss2003/capacitor-image-marker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daboss2003%2Fcapacitor-image-marker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33752290,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-05-31T23:03:33.503Z","updated_at":"2026-05-31T23:03:47.871Z","avatar_url":"https://github.com/daboss2003.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @daboss2003/capacitor-image-marker\n\nA Capacitor plugin for adding text and image watermarks to images on **iOS**, **Android**, and **Web**.\n\nThis is a from-scratch Capacitor port of the API surface of\n[`react-native-image-marker`](https://github.com/JimmyDaddy/react-native-image-marker)\n(MIT licensed, by [@JimmyDaddy](https://github.com/JimmyDaddy)). No source code\nfrom the original project is included — see `NOTICE` for attribution.\n\n## Install\n\n```bash\nnpm install @daboss2003/capacitor-image-marker\nnpx cap sync\n```\n\n### Platform requirements\n\n| Platform | Minimum |\n| --- | --- |\n| iOS    | 13.0 |\n| Android | SDK 22 |\n| Web    | Any modern browser with Canvas 2D |\n\n## Example app\n\nA working Capacitor app that exercises every feature (text watermarks, image\nwatermarks, position presets, font size, scale, max-size, save format, etc.)\nlives in [`example/`](./example). Quick start:\n\n```bash\ncd example\nnpm install\nnpm run dev            # opens http://localhost:5173\n\n# Native:\nnpx cap add ios \u0026\u0026 npm run ios\nnpx cap add android \u0026\u0026 npm run android\n```\n\nSee [`example/README.md`](./example/README.md) for details.\n\n## Image sources\n\nWherever an `ImageOptions.src` is accepted, you may pass:\n\n- An absolute `file://` path (e.g. from `@capacitor/filesystem`)\n- An `http://` / `https://` URL\n- A `data:image/...;base64,...` data URI\n- A bare base64 string (will be treated as PNG/JPEG payload)\n\nNo `require('./image.png')` style asset references — pass real URIs.\n\n## Quick start\n\n### Mark text on an image\n\n```ts\nimport {\n  ImageMarker,\n  Position,\n  TextBackgroundType,\n  ImageFormat,\n} from '@daboss2003/capacitor-image-marker';\n\nconst result = await ImageMarker.markText({\n  backgroundImage: {\n    src: 'file:///path/to/photo.jpg',\n    scale: 1,\n    rotate: 0,\n    alpha: 1,\n  },\n  watermarkTexts: [\n    {\n      text: 'Hello, World',\n      position: { position: Position.bottomRight },\n      style: {\n        color: '#ffffff',\n        fontSize: 36,\n        fontName: 'Helvetica',\n        bold: true,\n        shadowStyle: {\n          dx: 2,\n          dy: 2,\n          radius: 4,\n          color: '#000000aa',\n        },\n        textBackgroundStyle: {\n          type: TextBackgroundType.none,\n          color: '#00000088',\n          padding: '8 12',\n          cornerRadius: {\n            all: { x: 6, y: 6 },\n          },\n        },\n      },\n    },\n  ],\n  quality: 90,\n  saveFormat: ImageFormat.jpg,\n});\n\nconsole.log(result.uri); // file:// path (or data: URI when saveFormat is base64)\n```\n\n### Mark image on image\n\n```ts\nconst result = await ImageMarker.markImage({\n  backgroundImage: { src: 'file:///path/to/photo.jpg' },\n  watermarkImages: [\n    {\n      src: 'file:///path/to/logo.png',\n      scale: 0.5,\n      alpha: 0.8,\n      rotate: 0,\n      position: { position: Position.bottomLeft },\n    },\n  ],\n  saveFormat: ImageFormat.png,\n});\n```\n\n## API\n\n```ts\nImageMarker.markText(options: TextMarkOptions): Promise\u003cMarkResult\u003e\nImageMarker.markImage(options: ImageMarkOptions): Promise\u003cMarkResult\u003e\n```\n\nBoth methods resolve with `{ uri: string }`:\n\n- For `saveFormat: 'png' | 'jpg'` (default `jpg`), `uri` is a `file://` path\n  to the rendered image in the app's cache directory.\n- For `saveFormat: 'base64'`, `uri` is a `data:image/png;base64,...` data URI.\n\n### `TextMarkOptions`\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `backgroundImage` | `ImageOptions` | — | Image to draw text on. |\n| `watermarkTexts` | `TextOptions[]` | `[]` | Text watermarks to render. |\n| `quality` | `number` (0–100) | `100` | JPEG quality. |\n| `filename` | `string` | random | Output filename in cache dir. |\n| `saveFormat` | `'png' \\| 'jpg' \\| 'base64'` | `'jpg'` | Output format. |\n| `maxSize` | `number` | `2048` | Downscale source so neither side exceeds this. |\n\n### `ImageMarkOptions`\n\n| Field | Type | Default | Description |\n| --- | --- | --- | --- |\n| `backgroundImage` | `ImageOptions` | — | Image to draw watermarks on. |\n| `watermarkImages` | `WatermarkImageOptions[]` | — | One or more image watermarks. |\n| `quality` | `number` | `100` | JPEG quality. |\n| `filename` | `string` | random | Output filename in cache dir. |\n| `saveFormat` | `'png' \\| 'jpg' \\| 'base64'` | `'jpg'` | Output format. |\n| `maxSize` | `number` | `2048` | Downscale source so neither side exceeds this. |\n\n### `ImageOptions`\n\n```ts\ninterface ImageOptions {\n  src: string;       // file:// | http(s):// | data: | bare base64\n  scale?: number;    // default 1\n  rotate?: number;   // degrees, default 0\n  alpha?: number;    // 0..1, default 1\n}\n```\n\n### `WatermarkImageOptions`\n\nSame as `ImageOptions` plus:\n\n```ts\ninterface WatermarkImageOptions extends ImageOptions {\n  position?: PositionOptions;\n}\n```\n\n### `PositionOptions`\n\nAnchor a watermark either with an enum or with explicit coordinates.\n\n```ts\ninterface PositionOptions {\n  X?: number | string;   // px, or \"10%\" of background width\n  Y?: number | string;   // px, or \"10%\" of background height\n  position?: Position;   // takes precedence if set\n}\n\nenum Position {\n  topLeft, topCenter, topRight,\n  bottomLeft, bottomCenter, bottomRight,\n  center,\n}\n```\n\n### `TextOptions`\n\n```ts\ninterface TextOptions {\n  text: string;\n  position?: PositionOptions;\n  style?: TextStyle;\n}\n```\n\n### `TextStyle`\n\n```ts\ninterface TextStyle {\n  color?: string;                     // CSS hex (#RGB, #RGBA, #RRGGBB, #RRGGBBAA)\n  fontName?: string;\n  fontSize?: number;                  // px / pt / sp\n  shadowStyle?: ShadowLayerStyle | null;\n  textBackgroundStyle?: TextBackgroundStyle | null;\n  underline?: boolean;\n  strikeThrough?: boolean;\n  textAlign?: 'left' | 'center' | 'right';\n  italic?: boolean;\n  bold?: boolean;\n  skewX?: number;                     // degrees, alternative to italic\n  rotate?: number;                    // degrees around anchor\n}\n```\n\n### `TextBackgroundStyle`\n\nA filled (optionally rounded) rectangle drawn behind the text.\n\n```ts\ninterface TextBackgroundStyle extends Padding {\n  type?: 'stretchX' | 'stretchY' | 'fit';   // default 'fit'\n  color: string;\n  cornerRadius?: CornerRadius;\n}\n```\n\nPadding is CSS-like — any of these forms work:\n\n```ts\n{ padding: 10 }\n{ padding: '10%' }\n{ padding: '10 20' }\n{ padding: '10% 20 30 40' }\n{ paddingHorizontal: 12, paddingVertical: 8 }\n{ paddingX: 12, paddingY: 8 }\n{ paddingLeft: 8, paddingRight: 4, paddingTop: 2, paddingBottom: 2 }\n```\n\n`CornerRadius` accepts per-corner or an `all` shorthand:\n\n```ts\n{\n  cornerRadius: {\n    topLeft: { x: 8, y: 8 },\n    topRight: { x: 8, y: 8 },\n    all: { x: 4, y: 4 },        // applies to corners not set above\n  }\n}\n```\n\n### `ShadowLayerStyle`\n\n```ts\ninterface ShadowLayerStyle {\n  dx: number;\n  dy: number;\n  radius: number;\n  color: string;\n}\n```\n\n## Notes \u0026 caveats\n\n- Coordinates are expressed in pixels of the background image (after any\n  `maxSize` downscaling). `'10%'` values are resolved relative to the parent\n  dimension (width for `X`/horizontal padding, height for `Y`/vertical\n  padding).\n- The default outer margin used by the enum `Position` values is `20px`.\n- On Web the output is always a `data:` URI (the browser has no file system\n  to write to). The `saveFormat` still controls MIME type (PNG vs JPEG).\n- iOS uses `UIGraphicsImageRenderer`; Android uses `Bitmap` + `Canvas`; Web\n  uses `\u003ccanvas\u003e` 2D.\n\n## License\n\nMIT — see [`LICENSE`](./LICENSE) and [`NOTICE`](./NOTICE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaboss2003%2Fcapacitor-image-marker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaboss2003%2Fcapacitor-image-marker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaboss2003%2Fcapacitor-image-marker/lists"}