@unif/react-native-camera 1.0.10 → 1.1.1

package/lib/typescript/src/camera/watermark/ViewShotWatermark.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { type CustomPhotoFile, type WatermarkType } from '../../utils';
+declare const ViewShotWatermark: React.FC<{
+    data?: CustomPhotoFile;
+    watermark?: WatermarkType;
+    onChange: (photo: CustomPhotoFile) => void;
+}>;
+export default ViewShotWatermark;
+export declare const styles: {
+    container: {
+        flex: number;
+        position: "absolute";
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        backgroundColor: string;
+        zIndex: number;
+    };
+    footer: {
+        position: "absolute";
+        left: number;
+        right: number;
+        bottom: number;
+        zIndex: number;
+    };
+    text: {
+        color: string;
+        textAlign: "center";
+        fontSize: number;
+    };
+};
+//# sourceMappingURL=ViewShotWatermark.d.ts.map

package/lib/typescript/src/camera/watermark/ViewShotWatermark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewShotWatermark.d.ts","sourceRoot":"","sources":["../../../../../src/camera/watermark/ViewShotWatermark.tsx"],"names":[],"mappings":"AASA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5C,CA6BA,CAAC;AAEF,eAAe,iBAAiB,CAAC;AAEjC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAuBjB,CAAC"}

package/lib/typescript/src/camera/watermark/index.d.ts

@@ -0,0 +1,4 @@
+import WaterMarkRender from './Render';
+import ViewShotWatermark from './ViewShotWatermark';
+export { WaterMarkRender, ViewShotWatermark };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/camera/watermark/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/camera/watermark/index.tsx"],"names":[],"mappings":"AASA,OAAO,eAAe,MAAM,UAAU,CAAC;AACvC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,CAAC"}

package/lib/typescript/src/utils/common.d.ts

@@ -4,6 +4,7 @@ export declare const SCREEN_WIDTH: number;
 export declare const CAPTURE_BUTTON_SIZE = 78;
 export declare const MAX_ZOOM_FACTOR = 10;
 export declare const CONTROL_BUTTON_SIZE = 44;
+export declare const MAX_ZINDEX = 99999;
 export declare const CameraModeList: CameraModeListItem[];
 export declare const CameraModeCommonData: CameraModeCommonType;
 export declare const SingleData: CameraModeCommonType & CameraModeImageType;

package/lib/typescript/src/utils/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACZ,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,eAAO,MAAM,YAAY,QAAiC,CAAC;AAG3D,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,eAAe,KAAK,CAAC;AAGlC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAGtC,eAAO,MAAM,cAAc,EAAE,kBAAkB,EAI9C,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,oBAIlC,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,oBAAoB,GAAG,mBAG/C,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,oBAAoB,GAAG,mBAGnD,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,oBAAoB,GAAG,kBAK9C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,WAGzB,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACZ,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,eAAO,MAAM,YAAY,QAAiC,CAAC;AAG3D,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,eAAe,KAAK,CAAC;AAGlC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,eAAO,MAAM,UAAU,QAAQ,CAAC;AAGhC,eAAO,MAAM,cAAc,EAAE,kBAAkB,EAI9C,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,oBAIlC,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,oBAAoB,GAAG,mBAG/C,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,oBAAoB,GAAG,mBAGnD,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,oBAAoB,GAAG,kBAK9C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,WAGzB,CAAC"}

package/lib/typescript/src/utils/index.d.ts

@@ -2,4 +2,6 @@ export * from './common';
 export * from './render-item';
 export * from './px-to-dp';
 export * from './interface';
+export * from './watermark';
+export * from './util';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAQA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAQA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC"}

package/lib/typescript/src/utils/interface.d.ts

@@ -29,6 +29,7 @@ export type DataRetainedModeType = 'retain' | 'clear';
 export type CameraProps = {
     cameraMode: CameraModeType[];
     dataRetainedMode: DataRetainedModeType;
+    watermark?: WatermarkType;
 };
 export type CameraModeListItem = {
     label: string;
@@ -52,6 +53,7 @@ export interface CameraRef {
 import type { PhotoFile } from 'react-native-vision-camera';
 export interface CustomPhotoFile extends PhotoFile {
     mode: CameraMode;
+    frontTime: number;
 }
 export interface ConfirmConfigProps {
     text?: string;
@@ -61,4 +63,12 @@ export interface ConfirmRef {
     open: (config?: ConfirmConfigProps) => Promise<boolean>;
     close: () => void;
 }
+export type WatermarkType = {
+    content?: string[];
+    image?: string;
+    gap?: number[];
+    rotate?: number;
+    width?: number;
+    height?: number;
+};
 //# sourceMappingURL=interface.d.ts.map

package/lib/typescript/src/utils/interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../../src/utils/interface.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;AAE9C,oBAAY,cAAc;IACxB,YAAY,iBAAO;IACnB,QAAQ,iBAAO;IACf,OAAO,iBAAO;CACf;AACD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,cAAc,CAAC;AAErD,SAAS;AACT,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC;AAEF,SAAS;AACT,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,SAAS;AACT,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,SAAS;AACT,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAC/C,mBAAmB,GACnB,kBAAkB,CAAC;AAErB,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtD,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,gBAAgB,EAAE,oBAAoB,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,EAAE,CAAC;AAEtD,MAAM,MAAM,UAAU,GAClB;IACE,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,kBAAkB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB,GACD,SAAS,GACT,IAAI,CAAC;AAET,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;IACpD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,kBAAkB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACxD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB"}
+{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../../src/utils/interface.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAC1C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;AAE9C,oBAAY,cAAc;IACxB,YAAY,iBAAO;IACnB,QAAQ,iBAAO;IACf,OAAO,iBAAO;CACf;AACD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,cAAc,CAAC;AAErD,SAAS;AACT,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC;AAEF,SAAS;AACT,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,SAAS;AACT,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,SAAS;AACT,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAC/C,mBAAmB,GACnB,kBAAkB,CAAC;AAErB,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtD,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,gBAAgB,EAAE,oBAAoB,CAAC;IACvC,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,EAAE,CAAC;AAEtD,MAAM,MAAM,UAAU,GAClB;IACE,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,kBAAkB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB,GACD,SAAS,GACT,IAAI,CAAC;AAET,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;IACpD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,kBAAkB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACxD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/lib/typescript/src/utils/render-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-item.d.ts","sourceRoot":"","sources":["../../../../src/utils/render-item.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAK3E,UAAU,OAAO;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,qCAKlB,OAAO,KAAQ,kBAAkB,CAAC,GAAG,CAYvC,CAAC"}
+{"version":3,"file":"render-item.d.ts","sourceRoot":"","sources":["../../../../src/utils/render-item.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAM3E,UAAU,OAAO;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,qCAKlB,OAAO,KAAQ,kBAAkB,CAAC,GAAG,CAYvC,CAAC"}

package/lib/typescript/src/utils/util.d.ts

@@ -0,0 +1,2 @@
+export declare const formatUri: (uri: string) => string;
+//# sourceMappingURL=util.d.ts.map

package/lib/typescript/src/utils/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/utils/util.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS,QAAS,MAAM,WAMpC,CAAC"}

package/lib/typescript/src/utils/watermark.d.ts

@@ -0,0 +1,11 @@
+import type { CanvasRenderingContext2D } from 'react-native-canvas';
+export declare const lastPx: (v: number) => number;
+export declare const getMeasure: (ctx: CanvasRenderingContext2D, content: string) => Promise<{
+    width: any;
+    height: any;
+}>;
+export declare const getContentMeasure: (ctx: CanvasRenderingContext2D, content: string[]) => Promise<{
+    width: number;
+    height: number;
+}>;
+//# sourceMappingURL=watermark.d.ts.map

package/lib/typescript/src/utils/watermark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"watermark.d.ts","sourceRoot":"","sources":["../../../../src/utils/watermark.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAEpE,eAAO,MAAM,MAAM,MAAO,MAAM,WACiC,CAAC;AAElE,eAAO,MAAM,UAAU,QAChB,wBAAwB,WACpB,MAAM;;;EAOhB,CAAC;AAEF,eAAO,MAAM,iBAAiB,QACvB,wBAAwB,WACpB,MAAM,EAAE;;;EAgBlB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-camera",
-  "version": "1.0.10",
+  "version": "1.1.1",
   "description": "camera",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -60,6 +60,7 @@
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.21",
     "@types/react-native": "0.70.0",
+    "@types/react-native-canvas": "^0.1.14",
     "commitlint": "^17.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^8.4.1",
@@ -71,11 +72,14 @@
     "react": "18.2.0",
     "react-native": "0.74.6",
     "react-native-builder-bob": "^0.20.0",
+    "react-native-canvas": "0.1.40",
     "react-native-gesture-handler": "^2.21.2",
     "react-native-reanimated": "^3.16.5",
     "react-native-reanimated-carousel": "^4.0.0-canary.22",
     "react-native-safe-area-context": "5.0.0",
+    "react-native-view-shot": "^4.0.3",
     "react-native-vision-camera": "^4.6.3",
+    "react-native-webview": "^13.0.0",
     "release-it": "^15.0.0",
     "turbo": "^1.10.7",
     "typescript": "^5.0.2"
@@ -84,13 +88,16 @@
     "@types/react": "17.0.21"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0",
+    "react-native-canvas": "*",
     "react-native-gesture-handler": ">=2.21.0",
     "react-native-reanimated": ">=3.9.0",
     "react-native-reanimated-carousel": ">=4.0.0",
-    "react-native-safe-area-context": ">=5.0.0",
-    "react-native-vision-camera": ">=4.0.0"
+    "react-native-safe-area-context": "*",
+    "react-native-view-shot": "^4.0.3",
+    "react-native-vision-camera": ">=4.0.0",
+    "react-native-webview": "*"
   },
   "workspaces": [
     "example"

package/src/camera/Camera.tsx

@@ -1,11 +1,12 @@
 /*
  * @Author: 刘利军
- * @Date: 2024-01-09 16:27:07
+ * @Date: 2024-12-02 13:48:40
  * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-23 11:39:40
+ * @LastEditTime: 2024-12-30 13:09:30
  * @Description:
  * @PageName:
  */
+
 import { StyleSheet } from 'react-native';
 import React, { useEffect, useRef, useState } from 'react';
 import {
@@ -13,6 +14,7 @@ import {
   useCameraDevice,
   useCameraFormat,
 } from 'react-native-vision-camera';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import NoCamera from './NoCamera';
 
 import {
@@ -28,6 +30,7 @@ import { SetUp } from './setup';
 import { PreView, PreViewContainer, SinglePre } from './preview';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useConfirm } from '../hooks';
+import { ViewShotWatermark, WaterMarkRender } from './watermark';
 
 export const PhotoAspectRatio: { [key: number]: number } = {
   4: 4 / 3,
@@ -48,6 +51,7 @@ const Camera: React.FC<{
   const [isActive, setIsActive] = useState(false);
   const [preVis, setPreVis] = useState(false);
 
+  const [watermarkUriVis, setWatermarkUriVis] = useState(false);
   const device = useCameraDevice(position, {
     physicalDevices: [
       'ultra-wide-angle-camera',
@@ -109,117 +113,153 @@ const Camera: React.FC<{
       message: '保存成功',
     });
   };
+  const openViewShotWatermark = () => {
+    setIsActive((val) => !val);
+    setWatermarkUriVis((val) => !val);
+  };
   return (
     <GestureHandlerRootView>
-      <VisionCamera
-        zoom={zoom}
-        format={format}
-        ref={camera}
-        style={styles.camera}
-        device={device}
-        isActive={isActive}
-        enableZoomGesture={true}
-        photoQualityBalance="balanced"
-        photo={cameraMode.some(
-          (item) => item.mode === 'single' || item.mode === 'continuous'
-        )}
-        video={showVideo()}
-        audio={showVideo()}
-        resizeMode={resizeMode}
-      />
-
-      <SetUp
-        isMultiCam={device?.isMultiCam}
-        onChange={(val) => (flash = val)}
-        onAspectRationChange={setAspectRatio}
-        onScreenChange={setResizeMode}
-        onVolumeChange={(val) => (enableShutterSound = val)}
-        onFishEyeOpen={(val) => {
-          if (val === 'fishEye') {
-            setZoom(device.minZoom);
-          }
-          if (val === 'default') {
-            setZoom(device.neutralZoom);
-          }
-        }}
-      />
-      <Footer
-        cameraMode={cameraMode}
-        photos={photos}
-        backPress={async () => {
-          if (photos.length > 0) {
-            const isBack = await confirmApi.open({
-              text: '返回会清空已拍摄数据,请确认!',
-            });
-            if (isBack) {
-              back();
+      <SafeAreaProvider>
+        <VisionCamera
+          zoom={zoom}
+          format={format}
+          ref={camera}
+          style={styles.camera}
+          device={device}
+          isActive={isActive}
+          enableZoomGesture={true}
+          photoQualityBalance="balanced"
+          photo={cameraMode.some(
+            (item) => item.mode === 'single' || item.mode === 'continuous'
+          )}
+          video={showVideo()}
+          audio={showVideo()}
+          resizeMode={resizeMode}
+        />
+
+        <SetUp
+          isMultiCam={device?.isMultiCam}
+          onChange={(val) => (flash = val)}
+          onAspectRationChange={setAspectRatio}
+          onScreenChange={setResizeMode}
+          onVolumeChange={(val) => (enableShutterSound = val)}
+          onFishEyeOpen={(val) => {
+            if (val === 'fishEye') {
+              setZoom(device.minZoom);
             }
-          } else {
-            back();
-          }
-        }}
-        thumbnailPress={showPreview}
-        onChange={(val) => {
-          if (dataRetainedMode === 'clear') {
-            setPhotos([]);
-          }
-          setMode(val);
-        }}
-        takePress={async () => {
-          const photo = await camera.current?.takePhoto({
-            flash,
-            enableShutterSound: enableShutterSound,
-          });
-          if (photo) {
-            setPhotos((p) => [...p, { ...photo, mode }]);
-          }
-          if (isSingle()) {
-            showPreview();
-          }
-        }}
-        savePress={() => {
-          confirm();
-        }}
-        rotatePress={() => {
-          setPosition((val) => {
-            if (val === 'back') {
-              return 'front';
+            if (val === 'default') {
+              setZoom(device.neutralZoom);
             }
-            return 'back';
-          });
-        }}
-      />
-
-      <PreViewContainer visible={preVis}>
-        {isSingle() ? (
-          <SinglePre
-            uri={photos[0]?.path as string}
-            onBack={() => signleBack()}
-            onSave={() => confirm()}
-          />
-        ) : (
-          <PreView
-            cameraMode={cameraMode}
-            data={photos}
-            onBack={() => commonBack()}
-            onDel={async (snapItem) => {
-              const isConfirm = await confirmApi.open({
-                text: '图片删除后无法恢复,请确认!',
+          }}
+        />
+        <Footer
+          cameraMode={cameraMode}
+          photos={photos}
+          backPress={async () => {
+            if (photos.length > 0) {
+              const isBack = await confirmApi.open({
+                text: '返回会清空已拍摄数据,请确认!',
               });
-              if (isConfirm) {
-                setPhotos((photoList) => {
-                  return photoList.filter(
-                    (photo) => photo.path !== snapItem?.path
-                  );
+              if (isBack) {
+                back();
+              }
+            } else {
+              back();
+            }
+          }}
+          thumbnailPress={showPreview}
+          onChange={(val) => {
+            if (dataRetainedMode === 'clear') {
+              setPhotos([]);
+            }
+            setMode(val);
+          }}
+          takePress={async () => {
+            const photo = await camera.current?.takePhoto({
+              flash,
+              enableShutterSound: enableShutterSound,
+            });
+            if (photo) {
+              setPhotos((p) => [
+                ...p,
+                { ...photo, frontTime: new Date().getTime(), mode },
+              ]);
+            }
+            // 拍照后进行水印
+            if (data.watermark) {
+              openViewShotWatermark();
+            } else {
+              if (isSingle()) {
+                showPreview();
+              }
+            }
+          }}
+          savePress={() => {
+            confirm();
+          }}
+          rotatePress={() => {
+            setPosition((val) => {
+              if (val === 'back') {
+                return 'front';
+              }
+              return 'back';
+            });
+          }}
+        />
+
+        {watermarkUriVis && (
+          <ViewShotWatermark
+            data={photos.at(-1)}
+            watermark={data.watermark}
+            onChange={(value) => {
+              setPhotos((photosList) => {
+                return photosList.map((item) => {
+                  if (item.frontTime === value.frontTime) {
+                    return value;
+                  }
+                  return item;
                 });
-                return isConfirm;
+              });
+              openViewShotWatermark();
+              if (isSingle()) {
+                showPreview();
               }
-              return isConfirm;
             }}
           />
         )}
-      </PreViewContainer>
-      {contextHolder}
+
+        <PreViewContainer visible={preVis}>
+          {isSingle() ? (
+            <SinglePre
+              uri={photos[0]?.path as string}
+              onBack={() => signleBack()}
+              onSave={() => confirm()}
+            />
+          ) : (
+            <PreView
+              cameraMode={cameraMode}
+              data={photos}
+              onBack={() => commonBack()}
+              onDel={async (snapItem) => {
+                const isConfirm = await confirmApi.open({
+                  text: '图片删除后无法恢复,请确认!',
+                });
+                if (isConfirm) {
+                  setPhotos((photoList) => {
+                    return photoList.filter(
+                      (photo) => photo.path !== snapItem?.path
+                    );
+                  });
+                  return isConfirm;
+                }
+                return isConfirm;
+              }}
+            />
+          )}
+        </PreViewContainer>
+        {data.watermark && <WaterMarkRender data={data.watermark} />}
+        {contextHolder}
+      </SafeAreaProvider>
     </GestureHandlerRootView>
   );
 };
@@ -227,5 +267,5 @@ const Camera: React.FC<{
 export default Camera;
 
 const styles = StyleSheet.create({
-  camera: { flex: 1 },
+  camera: { flex: 1, backgroundColor: '#000' },
 });

package/src/camera/footer/Footer.tsx

@@ -9,6 +9,7 @@ import {
 import React, { useState } from 'react';
 import {
   CameraModeEnum,
+  formatUri,
   type CameraMode,
   type CameraModeType,
 } from '../../utils';
@@ -90,7 +91,7 @@ const Footer: React.FC<{
             <View style={styles.footerHorizontal}>
               {isPhotos() ? (
                 <PreviewThumbnail
-                  uri={`file://${photos[photos.length - 1]?.path}`}
+                  uri={formatUri(photos[photos.length - 1]?.path || '')}
                   onPress={thumbnailPress}
                 />
               ) : (
@@ -145,6 +146,7 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 10,
     borderTopRightRadius: 10,
     paddingHorizontal: 16,
+    zIndex: 9,
   },
   footerBottom: {
     flexDirection: 'row',

package/src/camera/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 刘利军
  * @Date: 2024-01-12 13:44:47
  * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-16 13:08:44
+ * @LastEditTime: 2024-12-25 11:04:23
  * @Description:
  * @PageName:
  */

package/src/camera/preview/PreView.tsx

@@ -2,7 +2,7 @@
  * @Author: 刘利军
  * @Date: 2024-12-02 13:37:36
  * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-20 13:03:12
+ * @LastEditTime: 2024-12-25 17:10:52
  * @Description:
  * @PageName:
  */
@@ -15,12 +15,14 @@ import { pxToDpWidth, type CustomPhotoFile } from '../../utils';
 import PreviewFooter from './PreviewFooter';
 
 import { styles as singleStyles, type CommonProps } from './SinglePre';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 const PreView: React.FC<
   {
     cameraMode: CameraModeType[];
     data: CustomPhotoFile[];
   } & CommonProps
 > = ({ cameraMode, data, onBack, onDel }) => {
+  const inset = useSafeAreaInsets();
   const [mode, setMode] = useState(data[0]?.mode);
   const showData = data.filter((item) => item.mode === mode);
   const [snapToIndex, setSnapToIndex] = useState<number>(0);
@@ -55,7 +57,7 @@ const PreView: React.FC<
       <View style={{ paddingHorizontal: pxToDpWidth(34) }}>
         <MyCarousel data={showData} onSnapToItem={setSnapToIndex} />
       </View>
-      <View style={singleStyles.footer}>
+      <View style={[singleStyles.footer, { bottom: inset.bottom + 16 }]}>
         <PreviewFooter
           actions={[
             <Back

package/src/camera/preview/PreViewContainer.tsx

@@ -2,7 +2,7 @@
  * @Author: 刘利军
  * @Date: 2024-12-02 13:37:36
  * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-20 17:30:09
+ * @LastEditTime: 2024-12-27 13:29:19
  * @Description:
  * @PageName:
  */
@@ -29,5 +29,6 @@ const styles = StyleSheet.create({
     right: 0,
     left: 0,
     backgroundColor: '#fff',
+    zIndex: 19,
   },
 });

package/src/camera/preview/PreviewFooter.tsx

@@ -2,7 +2,7 @@
  * @Author: 刘利军
  * @Date: 2024-12-16 09:21:56
  * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-16 10:27:40
+ * @LastEditTime: 2024-12-25 17:12:01
  * @Description:
  * @PageName:
  */

package/src/camera/preview/SinglePre.tsx

@@ -2,7 +2,7 @@
  * @Author: 刘利军
  * @Date: 2024-12-16 09:54:00
  * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-20 17:13:39
+ * @LastEditTime: 2024-12-27 10:55:55
  * @Description:
  * @PageName:
  */
@@ -10,7 +10,7 @@ import { Image, StyleSheet, View } from 'react-native';
 import React from 'react';
 import PreviewFooter from './PreviewFooter';
 import { Back, Save } from '../../components';
-import { type CustomPhotoFile } from '../../utils';
+import { formatUri, type CustomPhotoFile } from '../../utils';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export interface SingleProps extends CommonProps {
@@ -25,13 +25,7 @@ const SinglePre: React.FC<SingleProps> = ({ uri, onBack, onSave }) => {
   const inset = useSafeAreaInsets();
   return (
     <View style={styles.container}>
-      <Image
-        style={styles.container}
-        source={{ uri: `file://${uri}` }}
-        onLoadEnd={() => {
-          // 预留水印逻辑
-        }}
-      />
+      <Image style={styles.container} source={{ uri: formatUri(uri) }} />
       <View style={[styles.footer, { bottom: inset.bottom + 16 }]}>
         <PreviewFooter
           actions={[
@@ -57,11 +51,12 @@ const SinglePre: React.FC<SingleProps> = ({ uri, onBack, onSave }) => {
 export default SinglePre;
 
 export const styles = StyleSheet.create({
-  container: { flex: 1 },
+  container: { flex: 1, backgroundColor: '#fff' },
   footer: {
     position: 'absolute',
     left: 0,
     right: 0,
+    bottom: 0,
   },
   image: { width: 60, height: 60 },
 });