{"_id":"@daboss2003/capacitor-image-marker","name":"@daboss2003/capacitor-image-marker","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@daboss2003/capacitor-image-marker","version":"1.0.0","description":"A Capacitor plugin for adding text and image watermarks to images on iOS, Android, and Web.","main":"dist/plugin.cjs.js","module":"dist/esm/index.js","types":"dist/esm/index.d.ts","unpkg":"dist/plugin.js","author":{"name":"daboss2003"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/daboss2003/capacitor-image-marker.git"},"bugs":{"url":"https://github.com/daboss2003/capacitor-image-marker/issues"},"keywords":["capacitor","plugin","native","image","marker","watermark","image-marker","ios","android","web"],"scripts":{"verify":"npm run verify:ios && npm run verify:android && npm run verify:web","verify:ios":"cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin -destination generic/platform=iOS && cd ..","verify:android":"cd android && ./gradlew clean build test && cd ..","verify:web":"npm run build","lint":"npm run eslint && npm run prettier -- --check","fmt":"npm run eslint -- --fix && npm run prettier -- --write","eslint":"eslint . --ext ts","prettier":"prettier \"**/*.{css,html,ts,js,java}\"","docgen":"docgen --api ImageMarkerPlugin --output-readme README.md --output-json dist/docs.json","build":"npm run clean && tsc && rollup -c rollup.config.js","clean":"rimraf ./dist","watch":"tsc --watch","prepublishOnly":"npm run build"},"devDependencies":{"@capacitor/core":"^6.0.0","@capacitor/docgen":"^0.2.2","@capacitor/ios":"^6.0.0","@capacitor/android":"^6.0.0","@ionic/eslint-config":"^0.3.0","@ionic/prettier-config":"^2.0.0","@ionic/swiftlint-config":"^1.1.2","eslint":"^7.32.0","prettier":"~2.4.1","prettier-plugin-java":"~1.6.1","rimraf":"^3.0.2","rollup":"^2.79.0","swiftlint":"^1.0.2","typescript":"~4.7.4"},"peerDependencies":{"@capacitor/core":"^6.0.0"},"capacitor":{"ios":{"src":"ios"},"android":{"src":"android"}},"prettier":"@ionic/prettier-config","swiftlint":"@ionic/swiftlint-config","eslintConfig":{"extends":"@ionic/eslint-config/recommended"},"gitHead":"502b891091be1525ba98e59f2706d8e7eb42f674","_id":"@daboss2003/capacitor-image-marker@1.0.0","homepage":"https://github.com/daboss2003/capacitor-image-marker#readme","_nodeVersion":"24.13.0","_npmVersion":"11.11.0","dist":{"integrity":"sha512-fuquDAT+mNrkle0PUim/3VQGQ7WqEIu3yshfiSPJRLlnzMzcIDC7328YSUv8GwR6L+R5AgwJRJi3IpOHB37K9A==","shasum":"50d18714fe4ab6e67459b2552c684401acfc7560","tarball":"https://registry.npmjs.org/@daboss2003/capacitor-image-marker/-/capacitor-image-marker-1.0.0.tgz","fileCount":38,"unpackedSize":239361,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCXrn0sT2a2jcg5zFLXR9vt4sK75f5dDuxIlhQfdk64cQIhAMaJb1inJUI/E8GZgqlQnK0TG+uP/UQ2nWvJU8mdYe0k"}]},"_npmUser":{"name":"samson-oluwafemi","email":"samsonoluwafemi203@gmail.com"},"directories":{},"maintainers":[{"name":"samson-oluwafemi","email":"samsonoluwafemi203@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/capacitor-image-marker_1.0.0_1778515260696_0.24270614337857754"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:01:00.525Z","1.0.0":"2026-05-11T16:01:00.857Z","modified":"2026-05-11T16:01:01.040Z"},"maintainers":[{"name":"samson-oluwafemi","email":"samsonoluwafemi203@gmail.com"}],"description":"A Capacitor plugin for adding text and image watermarks to images on iOS, Android, and Web.","homepage":"https://github.com/daboss2003/capacitor-image-marker#readme","keywords":["capacitor","plugin","native","image","marker","watermark","image-marker","ios","android","web"],"repository":{"type":"git","url":"git+https://github.com/daboss2003/capacitor-image-marker.git"},"author":{"name":"daboss2003"},"bugs":{"url":"https://github.com/daboss2003/capacitor-image-marker/issues"},"license":"MIT","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 && npm run ios\nnpx cap add android && 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<MarkResult>\nImageMarker.markImage(options: ImageMarkOptions): Promise<MarkResult>\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 & 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 `<canvas>` 2D.\n\n## License\n\nMIT — see [`LICENSE`](./LICENSE) and [`NOTICE`](./NOTICE).\n","readmeFilename":"README.md","_rev":"1-bb81ae71cd93ddc811985b0c9d31a607"}