@unif/react-native-camera 1.0.9 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-camera",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "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": ">0.1.40",
     "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": ">=13.0.0"
   },
   "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:26:31
+ * @LastEditTime: 2024-12-27 10:44:31
  * @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',
@@ -101,124 +105,159 @@ const Camera: React.FC<{
     onChange({
       code: 200,
       data: photos.map((item) => ({
-        ...item,
+        cameraMode: item.mode,
         id: new Date().getTime().toString(),
         cameraType: position,
+        path: item.path,
       })),
       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
-                  );
-                });
-                return isConfirm;
+              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();
               }
-              return isConfirm;
+            }
+          }}
+          savePress={() => {
+            confirm();
+          }}
+          rotatePress={() => {
+            setPosition((val) => {
+              if (val === 'back') {
+                return 'front';
+              }
+              return 'back';
+            });
+          }}
+        />
+
+        {watermarkUriVis && (
+          <ViewShotWatermark
+            data={photos.at(-1)}
+            watermark={data.watermark}
+            onChange={(value) => {
+              console.log(value);
+              setPhotos((photosList) => {
+                return photosList.map((item) => {
+                  if (item.frontTime === value.frontTime) {
+                    return value;
+                  }
+                  return item;
+                });
+              });
+              openViewShotWatermark();
             }}
           />
         )}
-      </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>
   );
 };

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-25 17:08: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 },
 });

package/src/camera/watermark/Render.tsx

@@ -0,0 +1,128 @@
+import { Dimensions, Image, StyleSheet, View } from 'react-native';
+import React, { useState } from 'react';
+import {
+  getContentMeasure,
+  getMeasure,
+  lastPx,
+  type WatermarkType,
+} from '../../utils';
+import Canvas, { Image as CanvasImage } from 'react-native-canvas';
+
+const Render: React.FC<{
+  data: WatermarkType;
+  zIndex?: number;
+}> = ({ data, zIndex }) => {
+  const [waterBase64, setWaterBase64] = useState<string>();
+
+  const getMarkSize = async (width: number, height: number) => {
+    let defaultWidth = lastPx(120);
+    let defaultHeight = lastPx(64);
+    if (!data?.image) {
+      defaultWidth = width;
+      defaultHeight = height;
+    }
+    return [data?.width ?? defaultWidth, data?.height ?? defaultHeight];
+  };
+
+  const handleImageRect = async (canvas: Canvas) => {
+    const ctx = canvas.getContext('2d');
+    const {
+      image,
+      content = [],
+      rotate = data.image ? 0 : -22,
+      gap = [100, 100],
+    } = data;
+
+    const measure = await getContentMeasure(ctx, content);
+
+    const [markWidth, markHeight] = await getMarkSize(
+      measure.width,
+      measure.height
+    );
+    const x = lastPx(gap[0] as number);
+    const y = lastPx(gap[1] as number);
+
+    const width = lastPx(markWidth as number);
+    const height = lastPx(markHeight as number);
+    canvas.width = width + x;
+    canvas.height = height + y;
+
+    const angle = (Math.PI * rotate) / 180;
+    ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
+    const setDataURL = async () => {
+      const imgBase64 = await canvas.toDataURL();
+      const base = imgBase64.replace(/^"|"$/g, '');
+      setWaterBase64(base.split(',')[1]);
+    };
+    if (image) {
+      const canvasImage = new CanvasImage(canvas);
+      canvasImage.crossOrigin = 'anonymous';
+      canvasImage.src = image;
+      canvasImage.width = width;
+      canvasImage.height = height;
+
+      ctx.rotate(angle);
+
+      canvasImage.addEventListener('load', async () => {
+        ctx.drawImage(
+          canvasImage,
+          -canvas.height / 2,
+          -canvas.width / 2,
+          width,
+          height
+        );
+        setDataURL();
+      });
+    } else {
+      if (content.length > 0) {
+        ctx.font = `${lastPx(22)}px Arial`;
+        ctx.textAlign = 'center';
+        ctx.rotate(angle);
+        for (let index = 0; index < content.length; index++) {
+          const element = content[index];
+          const metrics = await getMeasure(ctx, element as string);
+          ctx.fillText(element as string, 0, metrics.height * (index + 1));
+        }
+        setDataURL();
+      }
+    }
+  };
+  return (
+    <View style={[styles.container, { zIndex }]}>
+      <View style={styles.watermark}>
+        {waterBase64 ? (
+          <Image
+            resizeMode="repeat"
+            source={{ uri: `data:image/png;base64,${waterBase64}` }}
+            style={{
+              width: Dimensions.get('window').width,
+              height: Dimensions.get('window').height,
+            }}
+          />
+        ) : (
+          <Canvas
+            ref={(canvas: Canvas) => canvas && handleImageRect(canvas)}
+            style={styles.canvas}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default Render;
+
+export const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  watermark: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flex: 1,
+    flexDirection: 'row',
+  },
+  canvas: {
+    display: 'none',
+  },
+});