@unif/react-native-camera 1.0.10 → 1.1.1

package/src/camera/setup/SetUp.tsx

@@ -2,7 +2,7 @@
  * @Author: 刘利军
  * @Date: 2024-12-02 11:52:31
  * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-23 10:46:40
+ * @LastEditTime: 2024-12-30 13:11:06
  * @Description:
  * @PageName:
  */
@@ -99,11 +99,11 @@ const SetUp: React.FC<{
   return (
     <>
       {openHeader && (
-        <View style={{ ...styles.top, ...styles.header, top: insets.top + 10 }}>
+        <View style={[styles.top, styles.header, { top: insets.top + 10 }]}>
           {/* <Text style={styles.text}></Text> */}
         </View>
       )}
-      <View style={{ ...styles.top, ...styles.tools }}>
+      <View style={[styles.top, styles.tools]}>
         <View style={styles.tool}>
           <TouchableOpacity
             style={styles.toolImg}
@@ -237,6 +237,7 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     marginHorizontal: 20,
     bottom: undefined,
+    zIndex: 9,
   },
   header: {
     display: 'flex',

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',
+  },
+});

package/src/camera/watermark/ViewShotWatermark.tsx

@@ -0,0 +1,81 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-25 16:56:42
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-30 13:07:33
+ * @Description:
+ * @PageName:
+ */
+import { Image, StyleSheet, Text, View } from 'react-native';
+import React, { useRef } from 'react';
+import ViewShot from 'react-native-view-shot';
+import WaterMarkRender from './Render';
+import {
+  formatUri,
+  MAX_ZINDEX,
+  pxToDpWidth,
+  type CustomPhotoFile,
+  type WatermarkType,
+} from '../../utils';
+
+const ViewShotWatermark: React.FC<{
+  data?: CustomPhotoFile;
+  watermark?: WatermarkType;
+  onChange: (photo: CustomPhotoFile) => void;
+}> = ({ data, watermark, onChange }) => {
+  const viewShotRef = useRef<ViewShot>(null);
+  if (!data || !watermark) {
+    return null;
+  }
+
+  const autoSaveWatermark = async () => {
+    const img = await viewShotRef.current?.capture?.();
+    onChange({ ...data, path: img || data.path });
+  };
+  return (
+    <>
+      <ViewShot ref={viewShotRef} style={styles.container}>
+        <Image
+          source={{ uri: formatUri(data.path) }}
+          style={styles.container}
+          onLoadEnd={() => {
+            setTimeout(() => {
+              autoSaveWatermark();
+            }, 800);
+          }}
+        />
+        <WaterMarkRender data={watermark} zIndex={MAX_ZINDEX + 1} />
+      </ViewShot>
+      <View style={styles.footer}>
+        <Text style={styles.text}>生成中...</Text>
+      </View>
+    </>
+  );
+};
+
+export default ViewShotWatermark;
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: '#fff',
+    zIndex: MAX_ZINDEX,
+  },
+  footer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 24,
+    zIndex: MAX_ZINDEX + 2,
+  },
+  text: {
+    color: '#fff',
+    textAlign: 'center',
+    fontSize: pxToDpWidth(32),
+  },
+});

package/src/camera/watermark/index.tsx

@@ -0,0 +1,12 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-25 11:01:20
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-30 13:08:49
+ * @Description:
+ * @PageName:
+ */
+
+import WaterMarkRender from './Render';
+import ViewShotWatermark from './ViewShotWatermark';
+export { WaterMarkRender, ViewShotWatermark };

package/src/utils/common.ts

@@ -2,7 +2,7 @@
  * @Author: 刘利军
  * @Date: 2024-01-11 14:53:09
  * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-20 17:05:50
+ * @LastEditTime: 2024-12-25 17:43:07
  * @Description:
  * @PageName:
  */
@@ -26,6 +26,8 @@ export const MAX_ZOOM_FACTOR = 10;
 // Control Button like Flash
 export const CONTROL_BUTTON_SIZE = 44;
 
+export const MAX_ZINDEX = 99999;
+
 // 相机拍照模式
 export const CameraModeList: CameraModeListItem[] = [
   { label: '连拍', value: 'continuous' },

package/src/utils/index.ts

@@ -2,7 +2,7 @@
  * @Author: 刘利军
  * @Date: 2024-01-11 14:53:09
  * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-17 16:54:04
+ * @LastEditTime: 2024-12-25 17:48:42
  * @Description:
  * @PageName:
  */
@@ -10,3 +10,5 @@ export * from './common';
 export * from './render-item';
 export * from './px-to-dp';
 export * from './interface';
+export * from './watermark';
+export * from './util';

package/src/utils/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 刘利军
  * @Date: 2024-01-12 11:38:13
  * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-23 11:27:11
+ * @LastEditTime: 2024-12-27 10:42:36
  * @Description:
  * @PageName:
  */
@@ -45,6 +45,7 @@ export type DataRetainedModeType = 'retain' | 'clear';
 export type CameraProps = {
   cameraMode: CameraModeType[];
   dataRetainedMode: DataRetainedModeType;
+  watermark?: WatermarkType;
 };
 
 export type CameraModeListItem = {
@@ -77,6 +78,7 @@ import type { PhotoFile } from 'react-native-vision-camera';
 
 export interface CustomPhotoFile extends PhotoFile {
   mode: CameraMode;
+  frontTime: number;
 }
 
 export interface ConfirmConfigProps {
@@ -88,3 +90,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;
+};

package/src/utils/render-item.tsx

@@ -2,7 +2,7 @@
  * @Author: 刘利军
  * @Date: 2024-12-17 16:02:49
  * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-18 14:40:10
+ * @LastEditTime: 2024-12-25 17:50:26
  * @Description:
  * @PageName:
  */
@@ -11,6 +11,7 @@ import type { CarouselRenderItem } from 'react-native-reanimated-carousel';
 import { SlideItem } from '../components';
 import React from 'react';
 import type { PhotoFile } from 'react-native-vision-camera';
+import { formatUri } from './util';
 
 interface Options {
   rounded?: boolean;
@@ -28,7 +29,7 @@ export const renderItem =
     return (
       <SlideItem
         key={index}
-        source={{ uri: `file://${item.path}` }}
+        source={{ uri: formatUri(item.path) }}
         index={index}
         rounded={rounded}
         style={style}

package/src/utils/util.ts

@@ -0,0 +1,15 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-25 17:48:18
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-25 17:48:44
+ * @Description:
+ * @PageName:
+ */
+export const formatUri = (uri: string) => {
+  const startPath = 'file://';
+  if (uri.startsWith(startPath)) {
+    return uri;
+  }
+  return `${startPath}${uri}`;
+};

package/src/utils/watermark.ts

@@ -0,0 +1,45 @@
+/*
+ * @Author: 刘利军
+ * @Date: 2024-12-25 13:51:40
+ * @LastEditors: 刘利军
+ * @LastEditTime: 2024-12-25 13:53:40
+ * @Description:
+ * @PageName:
+ */
+import { PixelRatio, Platform } from 'react-native';
+import { pxToDpWidth } from './px-to-dp';
+import type { CanvasRenderingContext2D } from 'react-native-canvas';
+
+export const lastPx = (v: number) =>
+  pxToDpWidth(v) / (Platform.OS === 'ios' ? PixelRatio.get() : 1);
+
+export const getMeasure = async (
+  ctx: CanvasRenderingContext2D,
+  content: string
+) => {
+  const metrics = await ctx.measureText(content);
+  return {
+    width: metrics.width,
+    height: metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent,
+  };
+};
+
+export const getContentMeasure = async (
+  ctx: CanvasRenderingContext2D,
+  content: string[]
+) => {
+  let sizes: number[][] = [];
+
+  for (let index = 0; index < content.length; index++) {
+    const element = content[index];
+    const metrics = await getMeasure(ctx, element as string);
+    sizes.push([metrics.width, metrics.height]);
+  }
+  const defaultWidth = Math.ceil(
+    Math.max(...sizes.map((size) => size[0] as number))
+  );
+  const defaultHeight =
+    Math.ceil(Math.max(...sizes.map((size) => size[1] as number))) *
+    content.length;
+  return { width: defaultWidth, height: defaultHeight };
+};