From 69fc683c9fbb3f0581fa7aa4e98ca57062d69404 Mon Sep 17 00:00:00 2001 From: JimmyDaddy Date: Wed, 6 Dec 2023 11:33:44 +0800 Subject: [PATCH] ci: update gh pages build actions --- .github/workflows/{native-ci.yml => ci.yml} | 88 ++++- .github/workflows/jekyll-gh-pages-build.yml | 75 ---- .github/workflows/jekyll-gh-pages-deploy.yml | 21 +- .gitignore | 2 + docs/latest/classes/Marker.html | 117 ------- docs/latest/enums/ImageFormat.html | 92 ----- docs/latest/enums/Position.html | 120 ------- docs/latest/enums/TextBackgroundType.html | 92 ----- docs/latest/index.html | 324 ------------------ docs/latest/interfaces/CornerRadius.html | 106 ------ docs/latest/interfaces/ImageMarkOptions.html | 202 ----------- docs/latest/interfaces/ImageOptions.html | 138 -------- docs/latest/interfaces/PositionOptions.html | 99 ------ docs/latest/interfaces/RadiusValue.html | 85 ----- docs/latest/interfaces/ShadowLayerStyle.html | 130 ------- .../interfaces/TextBackgroundStyle.html | 254 -------------- docs/latest/interfaces/TextMarkOptions.html | 166 --------- docs/latest/interfaces/TextOptions.html | 117 ------- docs/latest/interfaces/TextStyle.html | 246 ------------- .../interfaces/WatermarkImageOptions.html | 149 -------- docs/latest/modules.html | 75 ---- docs/v1.0.x/classes/Marker.html | 114 ------ docs/v1.0.x/enums/ImageFormat.html | 89 ----- docs/v1.0.x/enums/Position.html | 117 ------- docs/v1.0.x/enums/TextBackgroundType.html | 89 ----- docs/v1.0.x/index.html | 155 --------- docs/v1.0.x/interfaces/ImageMarkOptions.html | 176 ---------- docs/v1.0.x/interfaces/ImageOptions.html | 133 ------- docs/v1.0.x/interfaces/PositionOptions.html | 96 ------ docs/v1.0.x/interfaces/ShadowLayerStyle.html | 127 ------- .../interfaces/TextBackgroundStyle.html | 132 ------- docs/v1.0.x/interfaces/TextMarkOptions.html | 163 --------- docs/v1.0.x/interfaces/TextOptions.html | 114 ------ docs/v1.0.x/interfaces/TextStyle.html | 243 ------------- docs/v1.0.x/modules.html | 69 ---- 35 files changed, 94 insertions(+), 4421 deletions(-) rename .github/workflows/{native-ci.yml => ci.yml} (66%) delete mode 100644 .github/workflows/jekyll-gh-pages-build.yml delete mode 100644 docs/latest/classes/Marker.html delete mode 100644 docs/latest/enums/ImageFormat.html delete mode 100644 docs/latest/enums/Position.html delete mode 100644 docs/latest/enums/TextBackgroundType.html delete mode 100644 docs/latest/index.html delete mode 100644 docs/latest/interfaces/CornerRadius.html delete mode 100644 docs/latest/interfaces/ImageMarkOptions.html delete mode 100644 docs/latest/interfaces/ImageOptions.html delete mode 100644 docs/latest/interfaces/PositionOptions.html delete mode 100644 docs/latest/interfaces/RadiusValue.html delete mode 100644 docs/latest/interfaces/ShadowLayerStyle.html delete mode 100644 docs/latest/interfaces/TextBackgroundStyle.html delete mode 100644 docs/latest/interfaces/TextMarkOptions.html delete mode 100644 docs/latest/interfaces/TextOptions.html delete mode 100644 docs/latest/interfaces/TextStyle.html delete mode 100644 docs/latest/interfaces/WatermarkImageOptions.html delete mode 100644 docs/latest/modules.html delete mode 100644 docs/v1.0.x/classes/Marker.html delete mode 100644 docs/v1.0.x/enums/ImageFormat.html delete mode 100644 docs/v1.0.x/enums/Position.html delete mode 100644 docs/v1.0.x/enums/TextBackgroundType.html delete mode 100644 docs/v1.0.x/index.html delete mode 100644 docs/v1.0.x/interfaces/ImageMarkOptions.html delete mode 100644 docs/v1.0.x/interfaces/ImageOptions.html delete mode 100644 docs/v1.0.x/interfaces/PositionOptions.html delete mode 100644 docs/v1.0.x/interfaces/ShadowLayerStyle.html delete mode 100644 docs/v1.0.x/interfaces/TextBackgroundStyle.html delete mode 100644 docs/v1.0.x/interfaces/TextMarkOptions.html delete mode 100644 docs/v1.0.x/interfaces/TextOptions.html delete mode 100644 docs/v1.0.x/interfaces/TextStyle.html delete mode 100644 docs/v1.0.x/modules.html diff --git a/.github/workflows/native-ci.yml b/.github/workflows/ci.yml similarity index 66% rename from .github/workflows/native-ci.yml rename to .github/workflows/ci.yml index fd83c1d5..1b69af8f 100644 --- a/.github/workflows/native-ci.yml +++ b/.github/workflows/ci.yml @@ -2,15 +2,6 @@ name: Build and Test on: pull_request: types: [opened, synchronize, reopened] - paths: - - 'example/**' - - 'android/**' - - 'ios/**' - - 'src/**' - - 'assets/**' - - 'package.json' - - 'react-native-image-marker.podspec' - - '*.MD' workflow_dispatch: jobs: @@ -22,9 +13,19 @@ jobs: - name: Checkout the code uses: actions/checkout@v4 + - name: Verify Dev Changed files + uses: tj-actions/verify-changed-files@v16.1.1 + id: verify-dev-changed-files + with: + files: | + !*.md + !*.MD + !*.yml + - uses: actions/cache@v3 name: Cache node_modules id: cache-node-modules + if: steps.verify-dev-changed-files.outputs.files_changed == 'true' with: path: | node_modules @@ -32,17 +33,20 @@ jobs: key: ${{ runner.os }}-nodeModules-${{ hashFiles('package.json') }}-${{ hashFiles('example/package.json') }} - name: Set up Ruby + if: steps.verify-dev-changed-files.outputs.files_changed == 'true' uses: ruby/setup-ruby@v1 with: ruby-version: 2.7 bundler-cache: true + - name: Setup node 16 + if: steps.verify-dev-changed-files.outputs.files_changed == 'true' uses: actions/setup-node@v3 with: node-version: '16' - name: Install npm dependencies - if: steps.cache-node-modules.outputs.cache-hit != 'true' + if: steps.cache-node-modules.outputs.cache-hit != 'true' && steps.verify-dev-changed-files.outputs.files_changed == 'true' run: | ls pwd @@ -60,8 +64,20 @@ jobs: - name: Checkout the code uses: actions/checkout@v4 + - name: Verify Android Changed files + uses: tj-actions/verify-changed-files@v16.1.1 + id: verify-android-changed-files + with: + files: | + android/** + src/** + assets/** + package.json + !example/ios/** + - uses: actions/cache@v3 name: Cache node_modules + if: steps.verify-android-changed-files.outputs.files_changed == 'true' id: cache-node-modules with: path: | @@ -73,6 +89,7 @@ jobs: - uses: actions/cache@v3 id: cache-gradle name: Cache Gradle dependencies + if: steps.verify-android-changed-files.outputs.files_changed == 'true' with: path: | ~/.gradle/caches @@ -81,33 +98,38 @@ jobs: - name: Set up Ruby uses: ruby/setup-ruby@v1 + if: steps.verify-android-changed-files.outputs.files_changed == 'true' with: ruby-version: 2.7 bundler-cache: true - name: Setup node 16 uses: actions/setup-node@v3 + if: steps.verify-android-changed-files.outputs.files_changed == 'true' with: node-version: '16' - name: Set up JDK uses: actions/setup-java@v3 + if: steps.verify-android-changed-files.outputs.files_changed == 'true' with: distribution: 'zulu' java-version: 11 - name: Install Gradle dependencies - if: steps.cache-gradle.outputs.cache-hit != 'true' + if: steps.cache-gradle.outputs.cache-hit != 'true' && steps.verify-android-changed-files.outputs.files_changed == 'true' run: | cd example/android ./gradlew build --stacktrace - name: Run unit tests + if: steps.verify-android-changed-files.outputs.files_changed == 'true' run: | cd example/android ./gradlew test --stacktrace - name: Build APK + if: steps.verify-android-changed-files.outputs.files_changed == 'true' run: | npm run prepack cd example/android @@ -115,6 +137,7 @@ jobs: mv app/build/outputs/apk/release/app-release.apk app-release-${{ github.sha }}.apk - name: Upload APK + if: steps.verify-android-changed-files.outputs.files_changed == 'true' uses: actions/upload-artifact@v3 with: name: app-release-${{ github.sha }}.apk @@ -132,8 +155,20 @@ jobs: - name: Checkout the code uses: actions/checkout@v4 + - name: Verify Android Changed files + uses: tj-actions/verify-changed-files@v16.1.1 + id: verify-android-changed-files + with: + files: | + android/** + src/** + assets/** + package.json + !example/ios/** + - uses: actions/cache@v3 name: Cache node_modules + if: steps.verify-android-changed-files.outputs.files_changed == 'true' id: cache-node-modules with: path: | @@ -144,6 +179,7 @@ jobs: - uses: actions/cache@v3 name: Cache Gradle dependencies + if: steps.verify-android-changed-files.outputs.files_changed == 'true' id: cache-gradle with: path: | @@ -154,23 +190,27 @@ jobs: - name: Set up Ruby uses: ruby/setup-ruby@v1 + if: steps.verify-android-changed-files.outputs.files_changed == 'true' with: ruby-version: 2.7 bundler-cache: true - name: Setup node 16 uses: actions/setup-node@v3 + if: steps.verify-android-changed-files.outputs.files_changed == 'true' with: node-version: '16' - name: Set up JDK uses: actions/setup-java@v3 + if: steps.verify-android-changed-files.outputs.files_changed == 'true' with: distribution: 'zulu' java-version: 11 - name: Instrumentation Tests uses: reactivecircus/android-emulator-runner@v2 + if: steps.verify-android-changed-files.outputs.files_changed == 'true' with: api-level: ${{ matrix.api-level }} target: ${{ matrix.target }} @@ -181,10 +221,10 @@ jobs: - name: Upload Reports uses: actions/upload-artifact@v3 + if: steps.verify-android-changed-files.outputs.files_changed == 'true' with: name: Test-Reports path: ${{ github.workspace }}/example/android/app/build/reports - if: always() ios-build-test: runs-on: macos-latest @@ -197,9 +237,21 @@ jobs: - name: Checkout the code uses: actions/checkout@v4 + - name: Verify iOS Changed files + uses: tj-actions/verify-changed-files@v16.1.1 + id: verify-iOS-changed-files + with: + files: | + ios/** + src/** + assets/** + package.json + !example/android/** + - uses: actions/cache@v3 name: Cache node_modules id: cache-node-modules + if: steps.verify-iOS-changed-files.outputs.files_changed == 'true' with: path: | node_modules @@ -210,37 +262,47 @@ jobs: - name: Cache Pods id: cache-pods uses: actions/cache@v3 + if: steps.verify-iOS-changed-files.outputs.files_changed == 'true' with: path: example/ios/Pods key: ${{ runner.os }}-pods-${{ matrix.cocoapods }}-${{ hashFiles('**/Podfile.lock') }} - name: Set up Ruby uses: ruby/setup-ruby@v1 + if: steps.verify-iOS-changed-files.outputs.files_changed == 'true' with: ruby-version: 2.7 bundler-cache: true + - name: Install Cocoapods + if: steps.verify-iOS-changed-files.outputs.files_changed == 'true' run: gem install cocoapods -v ${{ matrix.cocoapods }} + - name: Setup node 16 + if: steps.verify-iOS-changed-files.outputs.files_changed == 'true' uses: actions/setup-node@v3 with: node-version: '16' - name: Install Pods - if: steps.cache-pods.outputs.cache-hit != 'true' + if: steps.cache-pods.outputs.cache-hit != 'true' && steps.verify-iOS-changed-files.outputs.files_changed == 'true' run: | cd example/ios pod cache clean --all pod install - name: Install xcpretty + if: steps.verify-iOS-changed-files.outputs.files_changed == 'true' run: gem install xcpretty - name: Build + if: steps.verify-iOS-changed-files.outputs.files_changed == 'true' run: | cd example/ios xcodebuild -workspace ImageMarkerExample.xcworkspace -scheme ImageMarkerExample -configuration Release -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone 12' | xcpretty + - name: Test + if: steps.verify-iOS-changed-files.outputs.files_changed == 'true' run: | cd example/ios xcodebuild -workspace ImageMarkerExample.xcworkspace -scheme ImageMarkerExample -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone 12' test | xcpretty diff --git a/.github/workflows/jekyll-gh-pages-build.yml b/.github/workflows/jekyll-gh-pages-build.yml deleted file mode 100644 index 3a11246a..00000000 --- a/.github/workflows/jekyll-gh-pages-build.yml +++ /dev/null @@ -1,75 +0,0 @@ -name: Build Jekyll with GitHub Pages - -on: - # Runs on pushes targeting the default branch - push: - branches: ["master"] - paths: - - "src/**" - - "assets/**" - - "README.MD" - - "README.0.9.2.MD" - - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: - -# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages -permissions: - contents: write - pages: write - id-token: write - pull-requests: write - -# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. -# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. -concurrency: - group: "pages" - cancel-in-progress: false - -jobs: - # Build job - build: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v3 - - uses: actions/setup-node@v2 - with: - node-version: 16 - - name: Install dependencies - run: npm install - - name: Build docs - run: npm run docs - - name: Create Pull Request - uses: peter-evans/create-pull-request@v5.0.2 - with: - add-paths: | - docs/ - *.md - *.MD - token: ${{ secrets.DEPLOY_SITE }} - commit-message: 'chore: update docs' - signoff: false - labels: | - docs - automated pr - delete-branch: true - title: 'chore: update docs' - branch-suffix: short-commit-hash - body: | - - Updated docs - > Auto-generated by [create-pull-request][1] - - [1]: https://github.com/peter-evans/create-pull-request - - ci-complete: - name: Complete CI - needs: [build] - if: ${{ always() }} - runs-on: ubuntu-latest - steps: - - name: Check all job status - if: >- - ${{ contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled') || contains(needs.*.result, 'skipped') }} - run: exit 1 - diff --git a/.github/workflows/jekyll-gh-pages-deploy.yml b/.github/workflows/jekyll-gh-pages-deploy.yml index 26cc7d99..e2a85a03 100644 --- a/.github/workflows/jekyll-gh-pages-deploy.yml +++ b/.github/workflows/jekyll-gh-pages-deploy.yml @@ -1,11 +1,13 @@ name: Deploy Jekyll with GitHub Pages on: - # Runs on pushes targeting the default branch - push: - branches: ["master"] + pull_request: + types: [closed] paths: - - "docs/**" + - "src/**" + - "assets/**" + - "README.MD" + - "README.0.9.2.MD" # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -27,9 +29,20 @@ jobs: # Build job build: runs-on: ubuntu-latest + if: github.event.pull_request.merged == true steps: - name: Checkout uses: actions/checkout@v3 + + - uses: actions/setup-node@v2 + with: + node-version: 16 + - name: Install dependencies + run: npm install + + - name: Build docs + run: npm run docs + - name: Setup Pages uses: actions/configure-pages@v3 - name: Build with Jekyll diff --git a/.gitignore b/.gitignore index 982a5430..b4f56392 100644 --- a/.gitignore +++ b/.gitignore @@ -70,3 +70,5 @@ android/keystores/debug.keystore # generated by bob lib/ + +docs/**/*.html diff --git a/docs/latest/classes/Marker.html b/docs/latest/classes/Marker.html deleted file mode 100644 index 6ab3c5d3..00000000 --- a/docs/latest/classes/Marker.html +++ /dev/null @@ -1,117 +0,0 @@ -Marker | image marker for rn
-
- -
-
-
-
- -

Class Marker

-
-

Hierarchy

-
    -
  • Marker
-
-
-
- -
-
-

Methods

-
markImage -markText -
-
-

Methods

-
-

Static markImage

-
    - -
  • -
    -

    Parameters

    -
    -

    Returns Promise<string>

    image url or base64 string

    - -
    -

    Description

    mark image on background image

    - -

    Example

    const options = {
     backgroundImage: {
       src: require('./images/test.jpg'),
       scale: 1,
       rotate: 20,
       alpha: 0.5,
     },
     quality: 100,
     filename: 'test',
     saveFormat: ImageFormat.png,
     maxSize: 1000,
     watermarkImages: [
       {
         src: require('./images/logo.png'),
         scale: 0.5,
         rotate: 45,
         alpha: 0.5,
         position: {
           X: 10,
           Y: 10,
         },
       },
       {
         src: require('./images/logo1.png'),
         scale: 0.5,
         rotate: 45,
         alpha: 0.5,
         position: {
           position: Position.center,
        },
       },
     ],
    };
    ImageMarker.markImage(options).then((res) => {
     console.log(res);
    }).catch((err) => {
     console.log(err);
    });
    // or
    await ImageMarker.markImage(options);
-
    -
-
-

Static markText

-
    - -
  • -
    -

    Parameters

    -
    -

    Returns Promise<string>

    image url or base64 string

    - -
    -

    Description

    mark text on image

    - -

    Example

    const options = {
     backgroundImage: {
      src: require('./images/test.jpg'),
      scale: 1,
      rotate: 20,
      alpha: 0.5,
     },
     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);
-
    -
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/enums/ImageFormat.html b/docs/latest/enums/ImageFormat.html deleted file mode 100644 index 364c145e..00000000 --- a/docs/latest/enums/ImageFormat.html +++ /dev/null @@ -1,92 +0,0 @@ -ImageFormat | image marker for rn
-
- -
-
-
-
- -

Enumeration ImageFormat

-
-
-

Description

ImageFormat enum for save image format

-
-
-
-
- -
-
-

Enumeration Members

-
base64 -jpg -png -
-
-

Enumeration Members

-
-

base64

-
base64: "base64"
-
-

jpg

-
jpg: "jpg"
-
-

png

-
png: "png"
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/enums/Position.html b/docs/latest/enums/Position.html deleted file mode 100644 index 168308bf..00000000 --- a/docs/latest/enums/Position.html +++ /dev/null @@ -1,120 +0,0 @@ -Position | image marker for rn
-
- -
-
-
-
- -

Enumeration Position

-
-
-

Description

Position enum for text watermark and image watermark

-
-
-
-
- -
-
-

Enumeration Members

-
bottomCenter -bottomLeft -bottomRight -center -topCenter -topLeft -topRight -
-
-

Enumeration Members

-
-

bottomCenter

-
bottomCenter: "bottomCenter"
-
-

bottomLeft

-
bottomLeft: "bottomLeft"
-
-

bottomRight

-
bottomRight: "bottomRight"
-
-

center

-
center: "center"
-
-

topCenter

-
topCenter: "topCenter"
-
-

topLeft

-
topLeft: "topLeft"
-
-

topRight

-
topRight: "topRight"
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/enums/TextBackgroundType.html b/docs/latest/enums/TextBackgroundType.html deleted file mode 100644 index a36e8119..00000000 --- a/docs/latest/enums/TextBackgroundType.html +++ /dev/null @@ -1,92 +0,0 @@ -TextBackgroundType | image marker for rn
-
- -
-
-
-
- -

Enumeration TextBackgroundType

-
-
-

Description

TextBackgroundType enum for text watermark

-
-
-
-
- -
-
-

Enumeration Members

-
none -stretchX -stretchY -
-
-

Enumeration Members

-
-

none

-
none: "fit"
-
-

stretchX

-
stretchX: "stretchX"
-
-

stretchY

-
stretchY: "stretchY"
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/index.html b/docs/latest/index.html deleted file mode 100644 index 297b30e9..00000000 --- a/docs/latest/index.html +++ /dev/null @@ -1,324 +0,0 @@ -image marker for rn
-
- -
-
-
-
-

image marker for rn

-
- - react native image marker Logo - -

react native image marker

 -
Add text or icon watermarks to images
-
-
- -

npm version npm stars forksgithub PRs Welcome license - platform-iOS platform-Android Native Build and Test -
- If this library is useful to you, pls give me a ⭐️. 🤩

-
- -

Features

-

Sample

- - -

- -

Usage

Text background fit

API

TextBackgroundType.none

-

Sample

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
const options = {
  // background image
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkTexts: [{
    text: 'text marker \n multline text',
    positionOptions: {
      position: Position.topLeft,
    },
    style: {
      color: '#ff00ff',
      fontSize: 30,
      fontName: 'Arial',
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#008F6D',
      },
      textBackgroundStyle: {
        padding: '10% 10%',
        type: TextBackgroundType.none,
        color: '#0FFF00',
      },
    },
  }],
  scale: 1,
  quality: 100,
  filename: 'test',
  saveFormat: ImageFormat.png,
  maxSize: 1000,
};
Marker.markText(options);

-
-

Text background stretchX

API

TextBackgroundType.stretchX

-

Sample

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
const options = {
  // background image
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkTexts: [{
    text: 'text marker \n multline text',
    positionOptions: {
      position: Position.topLeft,
    },
    style: {
      color: '#FC0700',
      fontSize: 30,
      fontName: 'Arial',
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#008F6D',
      },
      textBackgroundStyle: {
        padding: '10% 10%',
        type: TextBackgroundType.stretchX,
        color: '#0FFF00',
      },
    },
  }],
  scale: 1,
  quality: 100,
  filename: 'test',
  saveFormat: ImageFormat.png,
  maxSize: 1000,
};
Marker.markText(options);
-
-

Text background stretchY

API

TextBackgroundType.stretchY

-

Sample

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
const options = {
  // background image
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkTexts: [{
    text: 'text marker \n multline text',
    positionOptions: {
      position: Position.topLeft,
    },
    style: {
      color: '#FC0700',
      fontSize: 30,
      fontName: 'Arial',
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#008F6D',
      },
      textBackgroundStyle: {
        padding: '10% 10%',
        type: TextBackgroundType.stretchY,
        color: '#0FFF00',
      },
    },
  }],
  scale: 1,
  quality: 100,
  filename: 'test',
  saveFormat: ImageFormat.png,
  maxSize: 1000,
};
ImageMarker.markText(options);

-
-

Text background border radius

API

TextBackgroundType.cornerRadius

-

Sample

- -

Example

import Marker, { Position } from "react-native-image-marker"
···
const options = {
  // background image
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkTexts: [{
    text: 'text marker normal',
    positionOptions: {
      position: Position.center,
    },
    style: {
      color: '#FC0700',
      fontSize: 30,
      fontName: 'Arial',
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#008F6D',
      },
      textBackgroundStyle: {
        padding: '10%',
        color: '#0fA',
        cornerRadius: {
          topLeft: {
            x: '20%',
            y: '50%',
          },
          topRight: {
            x: '20%',
            y: '50%',
          },
        },
      },
    },
  }],
  scale: 1,
  quality: 100,
  filename: 'test',
  saveFormat: ImageFormat.png,
  maxSize: 1000,
};
ImageMarker.markText(options);

-
-

Text with shadow

API

ShadowLayerStyle

-

Sample

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
const options = {
  // background image
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkTexts: [{
    text: 'text marker \n multline text',
    positionOptions: {
      position: Position.topLeft,
    },
    style: {
      color: '#F4F50A',
      fontSize: 30,
      fontName: 'Arial',
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#6450B0',
      },
    },
  }],
  scale: 1,
  quality: 100,
  filename: 'test',
  saveFormat: ImageFormat.png,
  maxSize: 1000,
};
Marker.markText(options);

-
-

Multiple text watermarks

API

markImage

-

Sample

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markText({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  waterMarkTexts: [{
    text: 'hello world \n 你好',
    positionOptions: {
      position: Position.topLeft,
    },
    style: {
      color: '#BB3B20',
      fontSize: 30,
      fontName: 'Arial',
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#0FFF00',
      },
    },
  }, {
    text: 'text marker normal',
    positionOptions: {
      position: Position.topRight,
    },
    style: {
      color: '#6450B0',
      fontSize: 30,
      fontName: 'Arial',
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#02FBBE',
      },
    },
  }],
})

-
-

Text rotation

Sample

- - - -

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markText({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
    rotate: 30,
  },
  waterMarkTexts: [{
    text: 'hello world \n 你好',
    positionOptions: {
      position: Position.topLeft,
    },
    style: {
      color: '#FFFF00',
      fontSize: 30,
      fontName: 'Arial',
      rotate: 30,
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#02B96B',
      },
      strikeThrough: true,
      underline: true,
    },
  }, {
    text: 'text marker normal',
    positionOptions: {
      position: Position.center,
    },
    style: {
      color: '#FFFF00',
      fontSize: 30,
      fontName: 'Arial',
      rotate: 30,
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#0FFF00',
      },
      strikeThrough: true,
      underline: true,
    },
  }],
})

-
-

Icon watermarks

Sample

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
  }],
})

-
-

Multiple icon watermarks

-

Note: require Android >= N, iOS >= iOS 13

-
-

Sample

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
  }, {
    src: require('./images/watermark1.png'),
    position: {
      position: Position.topRight,
    },
  }, {
    src: require('./images/watermark2.png'),
    position: {
      position: Position.bottomCenter,
    },
  }],
})

-
-

Background rotation

Sample

- - -

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
    rotate: 30,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
  }],
});

Marker.markText({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
    rotate: 30,
  },
  watermarkTexts: [{
    text: 'hello world \n 你好',
    positionOptions: {
      position: Position.topLeft,
    },
    style: {
      color: '#FFFF00',
      fontSize: 30,
      fontName: 'Arial',
      rotate: 30,
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#02B96B',
      },
      shadowStyle: {
        dx: 10,
        dy: 10,
        radius: 10,
        color: '#008F6D',
      },
      strikeThrough: true,
      underline: true,
    },
  }, {
    text: 'hello world \n 你好',
    positionOptions: {
      position: Position.center,
    },
    style: {
      color: '#FFFF00',
      fontSize: 30,
      fontName: 'Arial',
      textBackgroundStyle: {
        padding: '10% 10%',
        color: '#0FFF00',
      },
      strikeThrough: true,
      underline: true,
    },
  }],
})

-
-

Icon rotation

Sample

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
    rotate: 30,
  }],
});
-
-

Transparent background

Sample

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
    alpha: 0.5,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
  }],
});
-
-

Transparent icon

Sample

- -

Example

import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
···
Marker.markImage({
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkImages: [{
    src: require('./images/watermark.png'),
    position: {
      position: Position.topLeft,
    },
    alpha: 0.5,
  }],
});
-
-

Compatibility

- - - - - - - - - - - - - - - - - - -
React Native Versionreact-native-image-marker Version
< 0.60.0v0.5.2 or earlier
>= 0.60.0, iOS < 13, Android < N(API Level 24)v1.0.x
>= 0.60.0, other casesv1.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'
-
-

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:

-

git clone git@github.com:JimmyDaddy/react-native-image-marker.git

cd ./react-native-image-marker

# 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

-
-

If this library is useful to you, please give me a ⭐️. 🤩

-

Made with create-react-native-library

-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/interfaces/CornerRadius.html b/docs/latest/interfaces/CornerRadius.html deleted file mode 100644 index 50ffa5b8..00000000 --- a/docs/latest/interfaces/CornerRadius.html +++ /dev/null @@ -1,106 +0,0 @@ -CornerRadius | image marker for rn
-
- -
-
-
-
- -

Interface CornerRadius

-
-

Hierarchy

-
    -
  • CornerRadius
-
-
-
- -
-
-

Properties

-
all? -bottomLeft? -bottomRight? -topLeft? -topRight? -
-
-

Properties

-
-

Optional all

-
all?: RadiusValue
-
-

Optional bottomLeft

-
bottomLeft?: RadiusValue
-
-

Optional bottomRight

-
bottomRight?: RadiusValue
-
-

Optional topLeft

-
topLeft?: RadiusValue
-
-

Optional topRight

-
topRight?: RadiusValue
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/interfaces/ImageMarkOptions.html b/docs/latest/interfaces/ImageMarkOptions.html deleted file mode 100644 index 567e3935..00000000 --- a/docs/latest/interfaces/ImageMarkOptions.html +++ /dev/null @@ -1,202 +0,0 @@ -ImageMarkOptions | image marker for rn
-
- -
-
-
-
- -

Interface ImageMarkOptions

-
-
-

Description

Text options for image watermark

- -

Example

backgroundImage: {
   src: require('./images/bg.png'),
   scale: 0.5,
   rotate: 45,
   alpha: 0.5
 },
 watermarkImages: [
   {
     src: require('./images/logo.png'),
     scale: 0.5,
     rotate: 45,
     alpha: 0.5,
     position: {
       X: 10,
       Y: 10,
     },
   },
   {
     src: require('./images/logo1.png'),
     scale: 0.5,
     rotate: 45,
     alpha: 0.5,
     position: {
       position: Position.center,
    },
   },
 ],
 quality: 1,
 filename: 'test',
 saveFormat: ImageFormat.jpg,
 maxSize: 2048
-
-
-
-

Hierarchy

-
    -
  • ImageMarkOptions
-
-
-
- -
-
-

Properties

-
backgroundImage -filename? -maxSize? -quality? -saveFormat? -watermarkImage? -watermarkImages -watermarkPositions? -
-
-

Properties

-
-

backgroundImage

-
backgroundImage: ImageOptions
-

FIXME: ImageSourcePropType type define bug

-
-
-

Description

background image options

- -

Example

backgroundImage: {
   src: require('./images/bg.png'),
   scale: 0.5,
   rotate: 45,
   alpha: 0.5
 }
-
-
-
-

Optional filename

-
filename?: string
-
-

Description

save image name

- -

Example

filename: 'test'
-
-
-
-

Optional maxSize

-
maxSize?: number
-
-

Description

max image size see #49 #42 -android only -need RN version >= 0.60.0, fresco MaxBitmapSize ImagePipelineConfig.Builder.experiment().setMaxBitmapSize(), see #49

- -

Default Value

2048

- -

Example

maxSize: 2048
-
-
-
-

Optional quality

-
quality?: number
-
-

Description

image quality 0-1

- -

Default Value

1

- -

Example

quality: 1
-
-
-
-

Optional saveFormat

-
saveFormat?: ImageFormat
-
-

Description

save image format

- -

Default Value

jpg

- -

Example

saveFormat: ImageFormat.jpg
-
-
-
-

Optional watermarkImage

-
watermarkImage?: ImageOptions
-
-

Since

1.1.0

- -

Deprecated

use watermarkImages instead

- -

Description

watermark image options

- -

Example

watermarkImage: {
   src: require('./images/logo.png'),
   scale: 0.5,
   rotate: 45,
   alpha: 0.5
 }
-
-
-
-

watermarkImages

-
watermarkImages: WatermarkImageOptions[]
-
-

Description

watermark images

- -

Example

watermarkImages: [
{
 src: require('./images/logo.png'),
 scale: 0.5,
 rotate: 45,
 alpha: 0.5,
 position: {
   X: 10,
   Y: 10,
   // or
   position: Position.center
 }
}]
-
-
-
-

Optional watermarkPositions

-
watermarkPositions?: PositionOptions
-
-

Since

1.1.0

- -

Deprecated

use watermarkImages instead

- -

Description

watermark position options

- -

Example

watermarkPositions: {
 X: 10,
 Y: 10,
 // or
 position: Position.center
}
-
- -

Note

use watermarkImages instead

-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/interfaces/ImageOptions.html b/docs/latest/interfaces/ImageOptions.html deleted file mode 100644 index 95255069..00000000 --- a/docs/latest/interfaces/ImageOptions.html +++ /dev/null @@ -1,138 +0,0 @@ -ImageOptions | image marker for rn
-
- -
-
-
-
- -

Interface ImageOptions

-
-
-

Description

Image options for background image or watermark image

- -

Example

{
 *  src: require('./images/logo.png'),
 *  scale: 0.5,
 *  rotate: 45,
 *  alpha: 0.5
 * }
-
-
-
-

Hierarchy

-
-
-
-
- -
-
-

Properties

-
alpha? -rotate? -scale? -src -
-
-

Properties

-
-

Optional alpha

-
alpha?: number
-
-

Description

transparent of background image 0 - 1

- -

Default Value

1

- -

Example

alpha: 0.5
-
-
-
-

Optional rotate

-
rotate?: number
-
-

Description

rotate image rotate 0-360

- -

Default Value

0

- -

Example

rotate: 45
-
-
-
-

Optional scale

-
scale?: number
-
-

Description

image scale >0

- -

Default Value

1

- -

Example

scale: 1
-
-
-
-

src

-
src: any
-
-

Description

image src, local image

- -

Example

src: require('./images/logo.png')
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/interfaces/PositionOptions.html b/docs/latest/interfaces/PositionOptions.html deleted file mode 100644 index 00f3555a..00000000 --- a/docs/latest/interfaces/PositionOptions.html +++ /dev/null @@ -1,99 +0,0 @@ -PositionOptions | image marker for rn
-
- -
-
-
-
- -

Interface PositionOptions

-
-
-

Description

PositionOptions for text watermark and image watermark, if you set position you don't need to set X and Y

- -

Example

positionOptions: {
 X: 10,
 Y: 10,
}
// or
positionOptions: {
 position: Position.topLeft,
}
// or
positionOptions: {
 X: '10%',
 Y: '10%',
}
-
-
-
-

Hierarchy

-
    -
  • PositionOptions
-
-
-
- -
-
-

Properties

-
X? -Y? -position? -
-
-

Properties

-
-

Optional X

-
X?: string | number
-
-

Optional Y

-
Y?: string | number
-
-

Optional position

-
position?: Position
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/interfaces/RadiusValue.html b/docs/latest/interfaces/RadiusValue.html deleted file mode 100644 index 1a708d2c..00000000 --- a/docs/latest/interfaces/RadiusValue.html +++ /dev/null @@ -1,85 +0,0 @@ -RadiusValue | image marker for rn
-
- -
-
-
-
- -

Interface RadiusValue

-
-

Hierarchy

-
    -
  • RadiusValue
-
-
-
- -
-
-

Properties

-
x -y -
-
-

Properties

-
-

x

-
x: string | number
-
-

y

-
y: string | number
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/interfaces/ShadowLayerStyle.html b/docs/latest/interfaces/ShadowLayerStyle.html deleted file mode 100644 index 91ce018b..00000000 --- a/docs/latest/interfaces/ShadowLayerStyle.html +++ /dev/null @@ -1,130 +0,0 @@ -ShadowLayerStyle | image marker for rn
-
- -
-
-
-
- -

Interface ShadowLayerStyle

-
-
-

Description

ShadowLayer style for text watermark

- -

Example

shadowStyle: {
 dx: 10,
 dy: 10,
 radius: 10,
 color: '#aacc22'
}
-
-
-
-

Hierarchy

-
    -
  • ShadowLayerStyle
-
-
-
- -
-
-

Properties

-
color -dx -dy -radius -
-
-

Properties

-
-

color

-
color: string
-
-

Description

shadow color

- -

Example

color: '#aacc22'
-
-
-
-

dx

-
dx: number
-
-

Description

shadow offset x

- -

Example

dx: 10
-
-
-
-

dy

-
dy: number
-
-

Description

shadow offset y

- -

Example

dy: 10
-
-
-
-

radius

-
radius: number
-
-

Description

shadow radius

- -

Example

radius: 10
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/interfaces/TextBackgroundStyle.html b/docs/latest/interfaces/TextBackgroundStyle.html deleted file mode 100644 index 457bac16..00000000 --- a/docs/latest/interfaces/TextBackgroundStyle.html +++ /dev/null @@ -1,254 +0,0 @@ -TextBackgroundStyle | image marker for rn
-
- -
-
-
-
- -

Interface TextBackgroundStyle

-
-
-

Description

background style for text watermark

-
-

thanks @onka13 for #38

-
- -

Example

textBackgroundStyle: {
 paddingX: 10,
 paddingY: 10,
 type: TextBackgroundType.stretchX,
 color: '#aacc22'
}
// or
textBackgroundStyle: {
 padding: '10% 50 15%',
 color: '#aacc22'
}
// or
textBackgroundStyle: {
 padding: 10,
 color: '#aacc22',
 cornerRadius: {
   topLeft: {
     x: '10%',
     y: 10,
   },
   topRight: {
     x: 10,
     y: 10,
   },
 }
}
-
-
-
-

Hierarchy

-
    -
  • Padding -
      -
    • TextBackgroundStyle
-
-
-
- -
-
-

Properties

-
color -cornerRadius? -padding? -paddingBottom? -paddingHorizontal? -paddingLeft? -paddingRight? -paddingTop? -paddingVertical? -paddingX? -paddingY? -type -
-
-

Properties

-
-

color

-
color: string
-
-

Description

background color

- -

Example

color: '#aacc22'
-
-
-
-

Optional cornerRadius

-
cornerRadius?: CornerRadius
-
-

Description

background corner radius

- -

Example

cornerRadius: {
 topLeft: {
   x: '10%',
   y: 10,
 },
 topRight: {
   x: 10,
   y: 10,
 },
 bottomLeft: {
   x: 10,
   y: 10,
 },
 bottomRight: {
   x: '10%',
   y: 10,
 },
}
-
-
-
-

Optional padding

-
padding?: string | number
-
-

Description

padding for text background

- -

Example

padding: 10
// or
padding: '10%'
// or
padding: '10% 20%'
// or
padding: '10% 20% 30%'
// or
padding: '10% 20% 30% 40%'
// or
padding: '10 20% 30 40%'
// or
padding: '10 20 30'
-
-
-
-

Optional paddingBottom

-
paddingBottom?: string | number
-
-

Description

padding bottom for text background

- -

Example

paddingBottom: 10
// or
paddingBottom: '10%'
-
-
-
-

Optional paddingHorizontal

-
paddingHorizontal?: string | number
-
-

Description

padding left and right (horizontal) for text background

- -

Example

paddingHorizontal: 10
// or
paddingHorizontal: '10%'
-
- -

Since

2.0.0

-
-
-

Optional paddingLeft

-
paddingLeft?: string | number
-
-

Description

padding left for text background

- -

Example

paddingLeft: 10
// or
paddingLeft: '10%'
-
-
-
-

Optional paddingRight

-
paddingRight?: string | number
-
-

Description

padding top for text background

- -

Example

paddingTop: 10
// or
paddingTop: '10%'
-
-
-
-

Optional paddingTop

-
paddingTop?: string | number
-
-

Description

padding right for text background

- -

Example

paddingRight: 10
// or
paddingRight: '10%'
-
-
-
-

Optional paddingVertical

-
paddingVertical?: string | number
-
-

Description

padding top and bottom (vertical) for text background

- -

Example

paddingVertical: 10
// or
paddingVertical: '10%'
-
- -

Since

2.0.0

-
-
-

Optional paddingX

-
paddingX?: string | number
-
-

Description

padding x, alias of paddingHorizontal

- -

Example

paddingX: 10
// or
paddingX: '10%'
-
-
-
-

Optional paddingY

-
paddingY?: string | number
-
-

Description

padding y, alias of paddingVertical

- -

Example

paddingY: 10
// or
paddingY: '10%'
-
-
-
-

type

-
type: null | TextBackgroundType
-
-

Description

background type

- -

Default Value

TextBackgroundType.stretchX

- -

Example

type: TextBackgroundType.stretchX
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/interfaces/TextMarkOptions.html b/docs/latest/interfaces/TextMarkOptions.html deleted file mode 100644 index 7b7f8ba1..00000000 --- a/docs/latest/interfaces/TextMarkOptions.html +++ /dev/null @@ -1,166 +0,0 @@ -TextMarkOptions | image marker for rn
-
- -
-
-
-
- -

Interface TextMarkOptions

-
-
-

Description

Options for text watermark

- -

Example

backgroundImage: {
   src: require('./images/logo.png'),
   scale: 0.5,
   rotate: 45,
   alpha: 0.5
 },
 watermarkTexts: [
 {
   text: 'hello world',
   positionOptions: {
     X: 10,
     Y: 10,
     // or
     // position: Position.center
   },
   style: {
     color: '#aacc22',
     fontName: 'Arial',
     fontSize: 12,
     shadowStyle: {
       dx: 10,
       dy: 10,
       radius: 10,
       color: '#aacc22'
     },
     textBackgroundStyle: {
       paddingX: 10,
       paddingY: 10,
       type: TextBackgroundType.stretchX,
       color: '#aacc22'
     },
     underline: true,
     strikeThrough: true,
     textAlign: 'left',
     italic: true,
     //or
     // skewX: 45,
     bold: true,
     rotate: 45
   }
 }],
 quality: 1,
 filename: 'test',
 saveFormat: ImageFormat.jpg,
 maxSize: 2048
-
-
-
-

Hierarchy

-
    -
  • TextMarkOptions
-
-
-
- -
-
-

Properties

-
backgroundImage -filename? -maxSize? -quality? -saveFormat? -watermarkTexts -
-
-

Properties

-
-

backgroundImage

-
backgroundImage: ImageOptions
-

FIXME: ImageSourcePropType type define bug

-
-
-

Description

background image options

- -

Example

backgroundImage: {
 src: require('./images/logo.png'),
 scale: 0.5,
 rotate: 45,
 alpha: 0.5
}
-
-
-
-

Optional filename

-
filename?: string
-
-

Description

save image name

- -

Example

filename: 'test'
-
-
-
-

Optional maxSize

-
maxSize?: number
-
-

Description

max image size see #49 #42 -android only -need RN version >= 0.60.0, fresco MaxBitmapSize ImagePipelineConfig.Builder.experiment().setMaxBitmapSize(), see #49

- -

Default Value

2048

- -

Example

maxSize: 2048
-
-
-
-

Optional quality

-
quality?: number
-
-

Description

image quality 0-100, 100 is best quality. If you want the quality to have more effect, try to set the image export format to the compressible format jpg. see #159

- -

Default Value

100

- -

Example

quality: 100
-
-
-
-

Optional saveFormat

-
saveFormat?: ImageFormat
-
-

Description

save image format

- -

Default Value

jpg

- -

Example

saveFormat: ImageFormat.png
-
-
-
-

watermarkTexts

-
watermarkTexts: TextOptions[]
-
-

Description

text options

- -

Example

watermarkTexts: [
{
 text: 'hello world',
 positionOptions: {
   X: 10,
   Y: 10,
   // or
   // position: Position.center
 },
 style: {
   color: '#aacc22',
   fontName: 'Arial',
   fontSize: 12,
   shadowStyle: {
     dx: 10,
     dy: 10,
     radius: 10,
     color: '#aacc22'
   },
   textBackgroundStyle: {
     paddingX: 10,
     paddingY: 10,
     type: TextBackgroundType.stretchX,
     color: '#aacc22'
   },
   underline: true,
   strikeThrough: true,
   textAlign: 'left',
   italic: true,
   //or
   // skewX: 45,
   bold: true,
   rotate: 45
 }
}]
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/interfaces/TextOptions.html b/docs/latest/interfaces/TextOptions.html deleted file mode 100644 index 2f51149f..00000000 --- a/docs/latest/interfaces/TextOptions.html +++ /dev/null @@ -1,117 +0,0 @@ -TextOptions | image marker for rn
-
- -
-
-
-
- -

Interface TextOptions

-
-
-

Description

Text options for text watermark

- -

Example

text: 'hello world',
 positionOptions: {
   X: 10,
   Y: 10,
   // or
   // position: Position.center
 },
 style: {
   color: '#aacc22',
   fontName: 'Arial',
   fontSize: 12,
   shadowStyle: {
     dx: 10,
     dy: 10,
     radius: 10,
     color: '#aacc22'
   },
   textBackgroundStyle: {
     paddingX: 10,
     paddingY: 10,
     type: TextBackgroundType.stretchX,
     color: '#aacc22'
   },
   underline: true,
   skewX: 45,
   strikeThrough: true,
   textAlign: 'left',
   italic: true,
   bold: true,
   rotate: 45
 }
-
-
-
-

Hierarchy

-
    -
  • TextOptions
-
-
-
- -
-
-

Properties

-
positionOptions? -style? -text -
-
-

Properties

-
-

Optional positionOptions

-
positionOptions?: PositionOptions
-
-

Description

text position options

- -

Example

positionOptions: {
  X: 10,
  Y: 10,
  // or
  // position: Position.center
}
-
-
-
-

Optional style

-
style?: TextStyle
-
-

Description

text style

- -

Example

style: {
 color: '#aacc22',
 fontName: 'Arial',
 fontSize: 12,
 shadowStyle: {
   dx: 10,
   dy: 10,
   radius: 10,
   color: '#aacc22'
 },
 textBackgroundStyle: {
   paddingX: 10,
   paddingY: 10,
   type: TextBackgroundType.stretchX,
   color: '#aacc22'
 },
 underline: true,
 strikeThrough: true,
 textAlign: 'left',
 italic: true,
 // or
 // skewX: 45,
 bold: true,
 rotate: 45
}
-
-
-
-

text

-
text: string
-
-

Description

text content

- -

Example

text: 'hello world'
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/interfaces/TextStyle.html b/docs/latest/interfaces/TextStyle.html deleted file mode 100644 index 6643a524..00000000 --- a/docs/latest/interfaces/TextStyle.html +++ /dev/null @@ -1,246 +0,0 @@ -TextStyle | image marker for rn
-
- -
-
-
-
- -

Interface TextStyle

-
-
-

Description

TextStyle for text watermark

- -

Example

textStyle: {
   color: '#aacc22',
   fontName: 'Arial',
   fontSize: 12,
   shadowStyle: {
     dx: 10,
     dy: 10,
     radius: 10,
     color: '#aacc22'
   },
   textBackgroundStyle: {
     paddingX: 10,
     paddingY: 10,
     type: TextBackgroundType.stretchX,
     color: '#aacc22'
   },
   underline: true,
   skewX: 45,
   strikeThrough: true,
   textAlign: 'left',
   italic: true,
   bold: true,
   rotate: 45
 }
-
-
-
-

Hierarchy

-
    -
  • TextStyle
-
-
-
- -
-
-

Properties

-
bold? -color? -fontName? -fontSize? -italic? -rotate? -shadowStyle? -skewX? -strikeThrough? -textAlign? -textBackgroundStyle? -underline? -
-
-

Properties

-
-

Optional bold

-
bold?: boolean
-
-

Description

text bold

- -

Default Value

false

- -

Example

bold: true
-
-
-
-

Optional color

-
color?: string
-
-

Description

font color

- -

Example

color: '#aacc22'
-
-
-
-

Optional fontName

-
fontName?: string
-
-

Description

font name

- -

Example

fontName: 'Arial'
-
-
-
-

Optional fontSize

-
fontSize?: number
-
-

Description

font size, Android use sp, iOS use pt

- -

Example

fontSize: 12
-
-
-
-

Optional italic

-
italic?: boolean
-
-

Description

text italic

- -

Default Value

false

- -

Example

italic: true
-
-
-
-

Optional rotate

-
rotate?: number
-
-

Description

rotate text

- -

Default Value

0

- -

Example

rotate: 45
-
-
-
-

Optional shadowStyle

-
shadowStyle?: null | ShadowLayerStyle
-
-

Description

text shadow style

- -

Example

shadowStyle: {
   dx: 10,
   dy: 10,
   radius: 10,
   color: '#aacc22'
 }
-
-
-
-

Optional skewX

-
skewX?: number
-
-

Description

css italic with degree, you can use italic instead

- -

Example

skewX: 45
-
-
-
-

Optional strikeThrough

-
strikeThrough?: boolean
-
-

Description

text stroke

- -

Default Value

false

- -

Example

strikeThrough: true
-
-
-
-

Optional textAlign

-
textAlign?: "left" | "center" | "right"
-
-

Description

text align

- -

Default Value

'left'

- -

Example

textAlign: 'left'
-
-
-
-

Optional textBackgroundStyle

-
textBackgroundStyle?: null | TextBackgroundStyle
-
-

Description

text background style

- -

Example

textBackgroundStyle: {
   paddingX: 10,
   paddingY: 10,
   type: TextBackgroundType.stretchX,
   color: '#aacc22'
 }
-
-
-
-

Optional underline

-
underline?: boolean
-
-

Description

text underline style

- -

Default Value

false

- -

Example

underline: true
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/interfaces/WatermarkImageOptions.html b/docs/latest/interfaces/WatermarkImageOptions.html deleted file mode 100644 index ffd2d7d4..00000000 --- a/docs/latest/interfaces/WatermarkImageOptions.html +++ /dev/null @@ -1,149 +0,0 @@ -WatermarkImageOptions | image marker for rn
-
- -
-
-
-
- -

Interface WatermarkImageOptions

-
-
-

Description

Text options for image watermark

- -

Example

src: require('./images/logo.png'),
 scale: 0.5,
 rotate: 45,
 alpha: 0.5
 position: {
  X: 10,
  Y: 10,
  // or
  // position: Position.center
}
-
-
-
-

Hierarchy

-
-
-
-
- -
-
-

Properties

-
alpha? -position? -rotate? -scale? -src -
-
-

Properties

-
-

Optional alpha

-
alpha?: number
-
-

Description

transparent of background image 0 - 1

- -

Default Value

1

- -

Example

alpha: 0.5
-
-
-
-

Optional position

-
position?: PositionOptions
-
-

Optional rotate

-
rotate?: number
-
-

Description

rotate image rotate 0-360

- -

Default Value

0

- -

Example

rotate: 45
-
-
-
-

Optional scale

-
scale?: number
-
-

Description

image scale >0

- -

Default Value

1

- -

Example

scale: 1
-
-
-
-

src

-
src: any
-
-

Description

image src, local image

- -

Example

src: require('./images/logo.png')
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/latest/modules.html b/docs/latest/modules.html deleted file mode 100644 index 324c686b..00000000 --- a/docs/latest/modules.html +++ /dev/null @@ -1,75 +0,0 @@ -image marker for rn
-
- -
-
-
-
-

image marker for rn

-
-
-

Index

-
-

Enumerations

-
ImageFormat -Position -TextBackgroundType -
-
-

Classes

-
Marker -
-
-

Interfaces

-
CornerRadius -ImageMarkOptions -ImageOptions -PositionOptions -RadiusValue -ShadowLayerStyle -TextBackgroundStyle -TextMarkOptions -TextOptions -TextStyle -WatermarkImageOptions -
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/classes/Marker.html b/docs/v1.0.x/classes/Marker.html deleted file mode 100644 index 28f6b085..00000000 --- a/docs/v1.0.x/classes/Marker.html +++ /dev/null @@ -1,114 +0,0 @@ -Marker | image marker for rn v1.0.x
-
- -
-
-
-
- -

Class Marker

-
-

Hierarchy

-
    -
  • Marker
-
-
-
- -
-
-

Methods

-
markImage -markText -
-
-

Methods

-
-

Static markImage

-
    - -
  • -
    -

    Parameters

    -
    -

    Returns Promise<string>

    image url or base64 string

    - -
    -

    Description

    mark image on background image

    - -

    Example

    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);
-
    -
-
-

Static markText

-
    - -
  • -
    -

    Parameters

    -
    -

    Returns Promise<string>

    image url or base64 string

    - -
    -

    Description

    mark text on image

    - -

    Example

    const options = {
     backgroundImage: {
      src: require('./images/test.jpg'),
      scale: 1,
      rotate: 20,
      alpha: 0.5,
     },
     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);
-
    -
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/enums/ImageFormat.html b/docs/v1.0.x/enums/ImageFormat.html deleted file mode 100644 index a244ed0f..00000000 --- a/docs/v1.0.x/enums/ImageFormat.html +++ /dev/null @@ -1,89 +0,0 @@ -ImageFormat | image marker for rn v1.0.x
-
- -
-
-
-
- -

Enumeration ImageFormat

-
-
-

Description

ImageFormat enum for save image format

-
-
-
-
- -
-
-

Enumeration Members

-
base64 -jpg -png -
-
-

Enumeration Members

-
-

base64

-
base64: "base64"
-
-

jpg

-
jpg: "jpg"
-
-

png

-
png: "png"
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/enums/Position.html b/docs/v1.0.x/enums/Position.html deleted file mode 100644 index 68e518d7..00000000 --- a/docs/v1.0.x/enums/Position.html +++ /dev/null @@ -1,117 +0,0 @@ -Position | image marker for rn v1.0.x
-
- -
-
-
-
- -

Enumeration Position

-
-
-

Description

Position enum for text watermark and image watermark

-
-
-
-
- -
-
-

Enumeration Members

-
bottomCenter -bottomLeft -bottomRight -center -topCenter -topLeft -topRight -
-
-

Enumeration Members

-
-

bottomCenter

-
bottomCenter: "bottomCenter"
-
-

bottomLeft

-
bottomLeft: "bottomLeft"
-
-

bottomRight

-
bottomRight: "bottomRight"
-
-

center

-
center: "center"
-
-

topCenter

-
topCenter: "topCenter"
-
-

topLeft

-
topLeft: "topLeft"
-
-

topRight

-
topRight: "topRight"
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/enums/TextBackgroundType.html b/docs/v1.0.x/enums/TextBackgroundType.html deleted file mode 100644 index cb6f43fd..00000000 --- a/docs/v1.0.x/enums/TextBackgroundType.html +++ /dev/null @@ -1,89 +0,0 @@ -TextBackgroundType | image marker for rn v1.0.x
-
- -
-
-
-
- -

Enumeration TextBackgroundType

-
-
-

Description

TextBackgroundType enum for text watermark

-
-
-
-
- -
-
-

Enumeration Members

-
none -stretchX -stretchY -
-
-

Enumeration Members

-
-

none

-
none: "fit"
-
-

stretchX

-
stretchX: "stretchX"
-
-

stretchY

-
stretchY: "stretchY"
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/index.html b/docs/v1.0.x/index.html deleted file mode 100644 index fbc179d0..00000000 --- a/docs/v1.0.x/index.html +++ /dev/null @@ -1,155 +0,0 @@ -image marker for rn v1.0.x
-
- -
-
-
-
-

image marker for rn v1.0.x

-

react-native-image-marker@v1.0.x

npm version npm stars forks -github PRs Welcome license

-

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

-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/interfaces/ImageMarkOptions.html b/docs/v1.0.x/interfaces/ImageMarkOptions.html deleted file mode 100644 index 7263b1d8..00000000 --- a/docs/v1.0.x/interfaces/ImageMarkOptions.html +++ /dev/null @@ -1,176 +0,0 @@ -ImageMarkOptions | image marker for rn v1.0.x
-
- -
-
-
-
- -

Interface ImageMarkOptions

-
-
-

Description

Text options for image watermark

- -

Example

backgroundImage: {
   src: require('./images/bg.png'),
   scale: 0.5,
   rotate: 45,
   alpha: 0.5
 }
 watermarkImage: {
   src: require('./images/logo.png'),
   scale: 0.5,
   rotate: 45,
   alpha: 0.5
 },
 watermarkPositions: {
   X: 10,
   Y: 10,
   // or
   // position: Position.center
 },
 quality: 1,
 filename: 'test',
 saveFormat: ImageFormat.jpg,
 maxSize: 2048
-
-
-
-

Hierarchy

-
    -
  • ImageMarkOptions
-
-
-
- -
-
-

Properties

-
backgroundImage -filename? -maxSize? -quality? -saveFormat? -watermarkImage -watermarkPositions? -
-
-

Properties

-
-

backgroundImage

-
backgroundImage: ImageOptions
-

FIXME: ImageSourcePropType type define bug

-
-
-

Description

background image options

- -

Example

backgroundImage: {
   src: require('./images/bg.png'),
   scale: 0.5,
   rotate: 45,
   alpha: 0.5
 }
-
-
-
-

Optional filename

-
filename?: string
-
-

Description

save image name

- -

Example

filename: 'test'
-
-
-
-

Optional maxSize

-
maxSize?: number
-
-

Description

max image size see #49 #42 -android only -need RN version >= 0.60.0, fresco MaxBitmapSize ImagePipelineConfig.Builder.experiment().setMaxBitmapSize(), see #49

- -

Default Value

2048

- -

Example

maxSize: 2048
-
-
-
-

Optional quality

-
quality?: number
-
-

Description

image quality 0-1

- -

Default Value

1

- -

Example

quality: 1
-
-
-
-

Optional saveFormat

-
saveFormat?: ImageFormat
-
-

Description

save image format

- -

Default Value

jpg

- -

Example

saveFormat: ImageFormat.jpg
-
-
-
-

watermarkImage

-
watermarkImage: ImageOptions
-
-

Description

watermark image options

- -

Example

watermarkImage: {
   src: require('./images/logo.png'),
   scale: 0.5,
   rotate: 45,
   alpha: 0.5
 }
-
-
-
-

Optional watermarkPositions

-
watermarkPositions?: PositionOptions
-
-

Description

watermark position options

- -

Example

watermarkPositions: {
 X: 10,
 Y: 10,
 // or
 // position: Position.center
}
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/interfaces/ImageOptions.html b/docs/v1.0.x/interfaces/ImageOptions.html deleted file mode 100644 index 9ed3b29b..00000000 --- a/docs/v1.0.x/interfaces/ImageOptions.html +++ /dev/null @@ -1,133 +0,0 @@ -ImageOptions | image marker for rn v1.0.x
-
- -
-
-
-
- -

Interface ImageOptions

-
-
-

Description

Image options for background image or watermark image

- -

Example

src: require('./images/logo.png'),
 scale: 0.5,
 rotate: 45,
 alpha: 0.5
-
-
-
-

Hierarchy

-
    -
  • ImageOptions
-
-
-
- -
-
-

Properties

-
alpha? -rotate? -scale? -src -
-
-

Properties

-
-

Optional alpha

-
alpha?: number
-
-

Description

transparent of background image 0 - 1

- -

Default Value

1

- -

Example

alpha: 0.5
-
-
-
-

Optional rotate

-
rotate?: number
-
-

Description

rotate image rotate 0-360

- -

Default Value

0

- -

Example

rotate: 45
-
-
-
-

Optional scale

-
scale?: number
-
-

Description

image scale >0

- -

Default Value

1

- -

Example

scale: 1
-
-
-
-

src

-
src: any
-
-

Description

image src, local image

- -

Example

src: require('./images/logo.png')
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/interfaces/PositionOptions.html b/docs/v1.0.x/interfaces/PositionOptions.html deleted file mode 100644 index 3dc72f68..00000000 --- a/docs/v1.0.x/interfaces/PositionOptions.html +++ /dev/null @@ -1,96 +0,0 @@ -PositionOptions | image marker for rn v1.0.x
-
- -
-
-
-
- -

Interface PositionOptions

-
-
-

Description

PositionOptions for text watermark and image watermark, if you set position you don't need to set X and Y

- -

Example

positionOptions: {
 X: 10,
 Y: 10,
}
// or
positionOptions: {
 position: Position.topLeft,
}
-
-
-
-

Hierarchy

-
    -
  • PositionOptions
-
-
-
- -
-
-

Properties

-
X? -Y? -position? -
-
-

Properties

-
-

Optional X

-
X?: number
-
-

Optional Y

-
Y?: number
-
-

Optional position

-
position?: Position
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/interfaces/ShadowLayerStyle.html b/docs/v1.0.x/interfaces/ShadowLayerStyle.html deleted file mode 100644 index 3dfb225d..00000000 --- a/docs/v1.0.x/interfaces/ShadowLayerStyle.html +++ /dev/null @@ -1,127 +0,0 @@ -ShadowLayerStyle | image marker for rn v1.0.x
-
- -
-
-
-
- -

Interface ShadowLayerStyle

-
-
-

Description

ShadowLayer style for text watermark

- -

Example

shadowStyle: {
 dx: 10,
 dy: 10,
 radius: 10,
 color: '#aacc22'
}
-
-
-
-

Hierarchy

-
    -
  • ShadowLayerStyle
-
-
-
- -
-
-

Properties

-
color -dx -dy -radius -
-
-

Properties

-
-

color

-
color: string
-
-

Description

shadow color

- -

Example

color: '#aacc22'
-
-
-
-

dx

-
dx: number
-
-

Description

shadow offset x

- -

Example

dx: 10
-
-
-
-

dy

-
dy: number
-
-

Description

shadow offset y

- -

Example

dy: 10
-
-
-
-

radius

-
radius: number
-
-

Description

shadow radius

- -

Example

radius: 10
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/interfaces/TextBackgroundStyle.html b/docs/v1.0.x/interfaces/TextBackgroundStyle.html deleted file mode 100644 index e45d6e63..00000000 --- a/docs/v1.0.x/interfaces/TextBackgroundStyle.html +++ /dev/null @@ -1,132 +0,0 @@ -TextBackgroundStyle | image marker for rn v1.0.x
-
- -
-
-
-
- -

Interface TextBackgroundStyle

-
-
-

Description

background style for text watermark

-
-

thanks @onka13 for #38

-
- -

Example

textBackgroundStyle: {
 paddingX: 10,
 paddingY: 10,
 type: TextBackgroundType.stretchX,
 color: '#aacc22'
}
-
-
-
-

Hierarchy

-
    -
  • TextBackgroundStyle
-
-
-
- -
-
-

Properties

-
color -paddingX -paddingY -type -
-
-

Properties

-
-

color

-
color: string
-
-

Description

background color

- -

Example

color: '#aacc22'
-
-
-
-

paddingX

-
paddingX: number
-
-

Description

padding x

- -

Example

paddingX: 10
-
-
-
-

paddingY

-
paddingY: number
-
-

Description

padding y

- -

Example

paddingY: 10
-
-
-
-

type

-
type: null | TextBackgroundType
-
-

Description

background type

- -

Default Value

TextBackgroundType.stretchX

- -

Example

type: TextBackgroundType.stretchX
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/interfaces/TextMarkOptions.html b/docs/v1.0.x/interfaces/TextMarkOptions.html deleted file mode 100644 index 6e33a039..00000000 --- a/docs/v1.0.x/interfaces/TextMarkOptions.html +++ /dev/null @@ -1,163 +0,0 @@ -TextMarkOptions | image marker for rn v1.0.x
-
- -
-
-
-
- -

Interface TextMarkOptions

-
-
-

Description

Options for text watermark

- -

Example

backgroundImage: {
   src: require('./images/logo.png'),
   scale: 0.5,
   rotate: 45,
   alpha: 0.5
 },
 watermarkTexts: [
 {
   text: 'hello world',
   positionOptions: {
     X: 10,
     Y: 10,
     // or
     // position: Position.center
   },
   style: {
     color: '#aacc22',
     fontName: 'Arial',
     fontSize: 12,
     shadowStyle: {
       dx: 10,
       dy: 10,
       radius: 10,
       color: '#aacc22'
     },
     textBackgroundStyle: {
       paddingX: 10,
       paddingY: 10,
       type: TextBackgroundType.stretchX,
       color: '#aacc22'
     },
     underline: true,
     strikeThrough: true,
     textAlign: 'left',
     italic: true,
     //or
     // skewX: 45,
     bold: true,
     rotate: 45
   }
 }],
 quality: 1,
 filename: 'test',
 saveFormat: ImageFormat.jpg,
 maxSize: 2048
-
-
-
-

Hierarchy

-
    -
  • TextMarkOptions
-
-
-
- -
-
-

Properties

-
backgroundImage -filename? -maxSize? -quality? -saveFormat? -watermarkTexts -
-
-

Properties

-
-

backgroundImage

-
backgroundImage: ImageOptions
-

FIXME: ImageSourcePropType type define bug

-
-
-

Description

background image options

- -

Example

backgroundImage: {
 src: require('./images/logo.png'),
 scale: 0.5,
 rotate: 45,
 alpha: 0.5
}
-
-
-
-

Optional filename

-
filename?: string
-
-

Description

save image name

- -

Example

filename: 'test'
-
-
-
-

Optional maxSize

-
maxSize?: number
-
-

Description

max image size see #49 #42 -android only -need RN version >= 0.60.0, fresco MaxBitmapSize ImagePipelineConfig.Builder.experiment().setMaxBitmapSize(), see #49

- -

Default Value

2048

- -

Example

maxSize: 2048
-
-
-
-

Optional quality

-
quality?: number
-
-

Description

image quality 0-1

- -

Default Value

1

- -

Example

quality: 1
-
-
-
-

Optional saveFormat

-
saveFormat?: ImageFormat
-
-

Description

save image format

- -

Default Value

jpg

- -

Example

saveFormat: ImageFormat.jpg
-
-
-
-

watermarkTexts

-
watermarkTexts: TextOptions[]
-
-

Description

text options

- -

Example

watermarkTexts: [
{
 text: 'hello world',
 positionOptions: {
   X: 10,
   Y: 10,
   // or
   // position: Position.center
 },
 style: {
   color: '#aacc22',
   fontName: 'Arial',
   fontSize: 12,
   shadowStyle: {
     dx: 10,
     dy: 10,
     radius: 10,
     color: '#aacc22'
   },
   textBackgroundStyle: {
     paddingX: 10,
     paddingY: 10,
     type: TextBackgroundType.stretchX,
     color: '#aacc22'
   },
   underline: true,
   strikeThrough: true,
   textAlign: 'left',
   italic: true,
   //or
   // skewX: 45,
   bold: true,
   rotate: 45
 }
}]
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/interfaces/TextOptions.html b/docs/v1.0.x/interfaces/TextOptions.html deleted file mode 100644 index 30e575f9..00000000 --- a/docs/v1.0.x/interfaces/TextOptions.html +++ /dev/null @@ -1,114 +0,0 @@ -TextOptions | image marker for rn v1.0.x
-
- -
-
-
-
- -

Interface TextOptions

-
-
-

Description

Text options for text watermark

- -

Example

text: 'hello world',
 positionOptions: {
   X: 10,
   Y: 10,
   // or
   // position: Position.center
 },
 style: {
   color: '#aacc22',
   fontName: 'Arial',
   fontSize: 12,
   shadowStyle: {
     dx: 10,
     dy: 10,
     radius: 10,
     color: '#aacc22'
   },
   textBackgroundStyle: {
     paddingX: 10,
     paddingY: 10,
     type: TextBackgroundType.stretchX,
     color: '#aacc22'
   },
   underline: true,
   skewX: 45,
   strikeThrough: true,
   textAlign: 'left',
   italic: true,
   bold: true,
   rotate: 45
 }
-
-
-
-

Hierarchy

-
    -
  • TextOptions
-
-
-
- -
-
-

Properties

-
positionOptions? -style? -text -
-
-

Properties

-
-

Optional positionOptions

-
positionOptions?: PositionOptions
-
-

Description

text position options

- -

Example

positionOptions: {
  X: 10,
  Y: 10,
  // or
  // position: Position.center
}
-
-
-
-

Optional style

-
style?: TextStyle
-
-

Description

text style

- -

Example

style: {
 color: '#aacc22',
 fontName: 'Arial',
 fontSize: 12,
 shadowStyle: {
   dx: 10,
   dy: 10,
   radius: 10,
   color: '#aacc22'
 },
 textBackgroundStyle: {
   paddingX: 10,
   paddingY: 10,
   type: TextBackgroundType.stretchX,
   color: '#aacc22'
 },
 underline: true,
 strikeThrough: true,
 textAlign: 'left',
 italic: true,
 // or
 // skewX: 45,
 bold: true,
 rotate: 45
}
-
-
-
-

text

-
text: string
-
-

Description

text content

- -

Example

text: 'hello world'
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/interfaces/TextStyle.html b/docs/v1.0.x/interfaces/TextStyle.html deleted file mode 100644 index ace9693c..00000000 --- a/docs/v1.0.x/interfaces/TextStyle.html +++ /dev/null @@ -1,243 +0,0 @@ -TextStyle | image marker for rn v1.0.x
-
- -
-
-
-
- -

Interface TextStyle

-
-
-

Description

TextStyle for text watermark

- -

Example

textStyle: {
   color: '#aacc22',
   fontName: 'Arial',
   fontSize: 12,
   shadowStyle: {
     dx: 10,
     dy: 10,
     radius: 10,
     color: '#aacc22'
   },
   textBackgroundStyle: {
     paddingX: 10,
     paddingY: 10,
     type: TextBackgroundType.stretchX,
     color: '#aacc22'
   },
   underline: true,
   skewX: 45,
   strikeThrough: true,
   textAlign: 'left',
   italic: true,
   bold: true,
   rotate: 45
 }
-
-
-
-

Hierarchy

-
    -
  • TextStyle
-
-
-
- -
-
-

Properties

-
bold? -color? -fontName? -fontSize? -italic? -rotate? -shadowStyle? -skewX? -strikeThrough? -textAlign? -textBackgroundStyle? -underline? -
-
-

Properties

-
-

Optional bold

-
bold?: boolean
-
-

Description

text bold

- -

Default Value

false

- -

Example

bold: true
-
-
-
-

Optional color

-
color?: string
-
-

Description

font color

- -

Example

color: '#aacc22'
-
-
-
-

Optional fontName

-
fontName?: string
-
-

Description

font name

- -

Example

fontName: 'Arial'
-
-
-
-

Optional fontSize

-
fontSize?: number
-
-

Description

font size, Android use sp, iOS use pt

- -

Example

fontSize: 12
-
-
-
-

Optional italic

-
italic?: boolean
-
-

Description

text italic

- -

Default Value

false

- -

Example

italic: true
-
-
-
-

Optional rotate

-
rotate?: number
-
-

Description

rotate text

- -

Default Value

0

- -

Example

rotate: 45
-
-
-
-

Optional shadowStyle

-
shadowStyle?: null | ShadowLayerStyle
-
-

Description

text shadow style

- -

Example

shadowStyle: {
   dx: 10,
   dy: 10,
   radius: 10,
   color: '#aacc22'
 }
-
-
-
-

Optional skewX

-
skewX?: number
-
-

Description

css italic with degree, you can use italic instead

- -

Example

skewX: 45
-
-
-
-

Optional strikeThrough

-
strikeThrough?: boolean
-
-

Description

text stroke

- -

Default Value

false

- -

Example

strikeThrough: true
-
-
-
-

Optional textAlign

-
textAlign?: "left" | "center" | "right"
-
-

Description

text align

- -

Default Value

'left'

- -

Example

textAlign: 'left'
-
-
-
-

Optional textBackgroundStyle

-
textBackgroundStyle?: null | TextBackgroundStyle
-
-

Description

text background style

- -

Example

textBackgroundStyle: {
   paddingX: 10,
   paddingY: 10,
   type: TextBackgroundType.stretchX,
   color: '#aacc22'
 }
-
-
-
-

Optional underline

-
underline?: boolean
-
-

Description

text underline style

- -

Default Value

false

- -

Example

underline: true
-
-
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-

On This Page

 -
-
-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file diff --git a/docs/v1.0.x/modules.html b/docs/v1.0.x/modules.html deleted file mode 100644 index 0fb371e2..00000000 --- a/docs/v1.0.x/modules.html +++ /dev/null @@ -1,69 +0,0 @@ -image marker for rn v1.0.x
-
- -
-
-
-
-

image marker for rn v1.0.x

-
-
-

Index

-
-

Enumerations

-
ImageFormat -Position -TextBackgroundType -
-
-

Classes

-
Marker -
-
-

Interfaces

-
ImageMarkOptions -ImageOptions -PositionOptions -ShadowLayerStyle -TextBackgroundStyle -TextMarkOptions -TextOptions -TextStyle -
-
-
-
-
-

Settings

 -
-
-

Member Visibility

-
    -
    • -
-
-

Theme

-
-
-
-

Generated using TypeDoc

-
\ No newline at end of file