PhotoClip

one_stop_public/libs/ImgUploadCom.jsx

@@ -8,6 +8,7 @@ import {
   getSassApiHeader,
   getSysCode,
 } from '@/webPublic/one_stop_public/2023yunshangguizhou/utils';
+import PhotoClip from './Split/PhotoClip/index';
 
 export default class ImgUploadCom extends React.Component {
   constructor(props) {
@@ -87,8 +88,14 @@ export default class ImgUploadCom extends React.Component {
 
   render() {
     const { json, disabled, otherProps } = this.props;
+    console.log(otherProps);
     const { url } = this.state;
+    // TODO 图片裁剪功能 如果开启了 直接更换为 裁剪组件 钟是志 2024年9月9日
+    //     {
+    //           otherProps.photoClip && <PhotoClip />
+    //     }
     return (
+      <>
       <Upload.Dragger
         disabled={disabled}
         accept={otherProps.accept || 'image/*'}
@@ -161,12 +168,16 @@ export default class ImgUploadCom extends React.Component {
         ) : (
           <div
             style={{
-              height: json.height,
-              width: json.width,
+              // height: json.height,
+              // width: json.width,
+              display: 'grid',
+              placeItems: 'center',
             }}
-          />
+          >{disabled ? '' : '点击上传'}</div>
         )}
       </Upload.Dragger>
+
+      </>
     );
   }
 }

one_stop_public/libs/Split/PhotoClip/importAll.js

@@ -19,5 +19,5 @@ export default async function importDependence() {
   await loadJs('/config/dependence/hammer.min.js');
   await loadJs('/config/dependence/lrz.all.bundle.js');
   await loadJs('/config/dependence/PhotoClip.js');
-  return true;
+  return new Promise((resolve, reject) => resolve(true));
 }

one_stop_public/libs/Split/PhotoClip/index.js

+import React, { useState, useEffect, Fragment } from 'react';
+import styles from './index.less';
+import {
+  Button,
+  WingBlank,
+  WhiteSpace,
+  Toast,
+} from 'antd-mobile';
+import importDependence from '@/webPublic/one_stop_public/libs/Split/PhotoClip/importAll';
+// import { uploadFile, updatePhoto2 } from '../../../services/InformationSvc';
+let pc = null;
+
+const dataURLtoFile = (dataurl, filename) => {
+  //将base64转换为文件
+  let arr = dataurl.split(',');
+  let mime = arr[0].match(/:(.*?);/)[1];
+
+  let bstr = atob(arr[1]);
+  let n = bstr.length;
+  let u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], filename, { type: mime });
+};
+
+export default function Index({}) {
+  const [imgData, setData] = useState(null);
+
+  useEffect(() => {
+    importDependence().then((res) => {
+      pc = new window.PhotoClip('#clipArea', {
+        size: [200, 280],
+        outputSize: [200, 280],
+        file: '#file',
+        view: '#view',
+        ok: '#clipBtn',
+        loadStart: function() {
+          console.log('开始读取照片');
+        },
+        loadComplete: function() {
+          console.log('照片读取完成');
+        },
+        done: function(dataURL) {
+          setData(dataURL);
+        },
+        fail: function(msg) {
+          alert(msg);
+        },
+      });
+    })
+  }, []);
+
+  function uploadImg() {
+    if (!imgData) {
+      Toast.info('请先上传图片,并拖动截取', 2);
+      return false;
+    }
+    // let file = dataURLtoFile(imgData, '1'); // 将base64 图片转换成 file
+    // console.log(file);
+    // Toast.loading('正在上传', 2);
+    // uploadFile({ file }).then((y) => {
+    //   if (y && y.url) {
+    //     updatePhoto2({ photo2: y.url }).then((response) => {
+    //       if (response) {
+    //         Toast.info('修改头像成功', 2);
+    //         window.history.back(-1);
+    //       }
+    //     });
+    //   }
+    // });
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.photo}>
+        <div id='clipArea' style={{ height: '300px' }} />
+        <div className={styles.photo2}>
+          <Button
+            type='primary'
+            inline
+            size='small'
+            id='clipBtn'
+            style={{ marginLeft: '20px' }}
+          >
+            截取
+          </Button>
+        </div>
+        <p style={{ color: 'red', padding: '20px' }}>
+          提示:
+          <br />
+          证件照上传要求：免冠正面照片，照片上正常应该看到人的两耳轮廓，照片尺寸可以为一寸或二寸，颜色可以为黑白或彩色。底色可为白色或蓝色.
+        </p>
+        <div
+          id='view'
+          style={{
+            margin: '0 auto',
+            width: '200px',
+            height: '280px',
+            backgroundColor: '#666',
+          }}
+         />
+        <WingBlank style={{ marginTop: '20px', marginBottom: '20px' }}>
+          <Button type='warning' onClick={uploadImg}>
+            上传
+          </Button>
+          <WhiteSpace />
+        </WingBlank>
+      </div>
+    </Fragment>
+  );
+}

one_stop_public/libs/Split/PhotoClip/index.less

+.photo{
+  background-color: #FFFFFF;
+  width: 100vw;
+  height: 100vh;
+  overflow-y: auto;
+  .uploadDiv{
+    height: 420px;
+  }
+}
+.photo2{
+  display: flex;
+  flex-wrap: nowrap;
+  margin: 20px;
+  justify-content: space-evenly;
+}
+
+.labelDom{
+  position: relative;
+  .file{
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+  }
+  .btn{
+    margin-right: 5px;
+  }
+  .text{
+    color: red;
+  }
+
+}
+.uploadBtn{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}