签章组件 支持自定义图片宽度

one_stop_public/libs/PictureSignature/PictureSignature.js

-import React, {useState, useEffect, useRef} from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import styles from './styles.less';
-import {Modal, Button, Icon, message} from 'antd';
-import ShowItem, {dragEventList, zipImage} from './ShowItem';
-import {apiRequest} from "../../utils/request";
-import {deepCopy} from "@/webPublic/one_stop_public/utils/myutils";
+import { Modal, Button, Icon, message } from 'antd';
+import ShowItem, { dragEventList, zipImage } from './ShowItem';
+import { apiRequest } from '../../utils/request';
+import { deepCopy } from '@/webPublic/one_stop_public/utils/myutils';
 
 let fakeFileInfo = {
   path: '/u/202112/25143111x0ki.jpg', // 超大的图片
   name: '摇摇后摇.jpg',
 };
 
-
 const getContent = (signConfig = [], ratioX) => {
   let data = deepCopy(signConfig);
   return JSON.stringify({
-    objs: data.map((g) => {
+    objs: data.map(g => {
       // 1200 的 x => 1500的 x
       //
       g.x = Math.ceil(g.x * ratioX, 10);
@@ -25,7 +24,7 @@ const getContent = (signConfig = [], ratioX) => {
         g.y = g.y + 20;
         // g.x = g.x + 20;
       }
-      if(g.type === 'image'){
+      if (g.type === 'image') {
         g.w = Math.ceil(g.w * ratioX);
         g.h = Math.ceil(g.h * ratioX);
       }
@@ -35,7 +34,6 @@ const getContent = (signConfig = [], ratioX) => {
   });
 };
 
-
 export default function PictureSignature({
   json,
   disabled,
@@ -45,18 +43,18 @@ export default function PictureSignature({
   form,
   // fileInfo,
   ...others
-                                         }) {
+}) {
   let imageRef = useRef();
-  const [fileInfo, setFileInfo] = useState({...others?.fileInfo});
+  const [fileInfo, setFileInfo] = useState({ ...others?.fileInfo });
   // const [fileInfo, setFileInfo] = useState(fakeFileInfo);
   const [openEdit, setOpenEdit] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [otherProps, setOtherProps] = useState({});
   const [imageInfo, setImageInfo] = useState(null);
   const changeShowModal = () => {
-    if(!showModal){
+    if (!showModal) {
       if (!imageInfo && !disabled) {
-        zipImage(fileInfo.path, fileInfo.name, otherProps?.backgroundImageWidth).then((res) => {
+        zipImage(fileInfo.path, fileInfo.name, otherProps?.backgroundImageWidth).then(res => {
           let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
           image.src = basicUrl + res;
           image.onload = () => {
@@ -83,7 +81,6 @@ export default function PictureSignature({
       imageRef.current = true;
       dragEventList(setOtherProps, otherProps);
     }
-
   }, [otherProps]);
 
   useEffect(() => {
@@ -100,21 +97,28 @@ export default function PictureSignature({
     }
   }, [json.otherProps]);
 
-  const {ModalProps, signConfig, footerButtons, originButtons, backgroundImageWidth, saveSignConfigValue = ''} = otherProps;
+  const {
+    ModalProps,
+    signConfig,
+    footerButtons,
+    originButtons,
+    backgroundImageWidth,
+    saveSignConfigValue = '',
+    showImageWidth = 1200,
+  } = otherProps;
 
-  const handleClickButton = (clickType) => {
+  const handleClickButton = clickType => {
     switch (clickType) {
       case 'startEdit': // 开始签章
         // console.log(imageInfo);
         setOpenEdit(true);
         break;
       case 'confirm': // 确定
-
-        onChangeFile({...fileInfo}, imageIndex);
+        onChangeFile({ ...fileInfo }, imageIndex);
         changeShowModal();
         break;
       case 'save': // 保存签章
-        let ratioX = backgroundImageWidth / 1200; // 本来是 1500 的 图片 宽度变成了 1200 高度变成了 1200/1500 * imageInfo.height;
+        let ratioX = backgroundImageWidth / showImageWidth; // 本来是 1500 的 图片 宽度变成了 1200 高度变成了 1200/1500 * imageInfo.height;
         // let ratioY = 1200 / backgroundImageWidth * imageInfo.height;
         // console.log(ratioX);
         // return ;
@@ -122,33 +126,33 @@ export default function PictureSignature({
         apiRequest('/ImageLibApi/merge', {
           background: fileInfo?.path,
           content,
-        }).then((res) => {
-          if(form && saveSignConfigValue){
+        }).then(res => {
+          if (form && saveSignConfigValue) {
             form.setFieldsValue({
               [saveSignConfigValue]: content,
-            })
+            });
           }
           if (res && res.path) {
             message.success('操作成功');
             let newPath = res.path;
             fileInfo.originPath = fileInfo.path;
             fileInfo.path = newPath;
-            setFileInfo({...fileInfo});
+            setFileInfo({ ...fileInfo });
             setOpenEdit(false);
           }
-        })
+        });
         break;
       case 'restore': // 还原图片
         if (fileInfo.originPath) {
           fileInfo.path = fileInfo.originPath;
-          setFileInfo({...fileInfo});
+          setFileInfo({ ...fileInfo });
           setOpenEdit(false);
         }
         break;
       default:
         return true;
     }
-  }
+  };
 
   const Footer = () => {
     if (disabled) {
@@ -157,10 +161,11 @@ export default function PictureSignature({
     if (openEdit) {
       return footerButtons.map(g => {
         return (
-          <Button type={g.type}
+          <Button
+            type={g.type}
             key={g.key}
             onClick={() => {
-                    handleClickButton(g.clickType)
+              handleClickButton(g.clickType);
             }}
           >
             {g.name}
@@ -170,10 +175,11 @@ export default function PictureSignature({
     } else {
       return originButtons.map(g => {
         return (
-          <Button type={g.type}
+          <Button
+            type={g.type}
             key={g.key}
             onClick={() => {
-                    handleClickButton(g.clickType)
+              handleClickButton(g.clickType);
             }}
           >
             {g.name}
@@ -187,8 +193,7 @@ export default function PictureSignature({
   }
   // console.log(imageInfo, fileInfo);
   return (
-    <div className={styles.outSideDiv}
-    >
+    <div className={styles.outSideDiv}>
       {fileInfo && fileInfo?.path && (
         <img
           className={styles.onePic}
@@ -205,9 +210,9 @@ export default function PictureSignature({
           onCancel={changeShowModal}
           getContainer={false}
           className={styles.ModalClass}
-          footer={<Footer/>}
+          footer={<Footer />}
           title={'图片签章'}
-          width={'1250px'}
+          width={showImageWidth + 50 + 'px'}
           bodyStyle={{
             minHeight: '700px',
             overflow: 'auto',
@@ -223,8 +228,8 @@ export default function PictureSignature({
                 className={styles.modalDiv}
                 style={{
                   backgroundImage: `url(${basicUrl + fileInfo?.path})`,
-                  width: 1200,
-                  height: (imageInfo.height / (imageInfo.width / 1200)),
+                  width: showImageWidth,
+                  height: imageInfo.height / (imageInfo.width / showImageWidth),
                 }}
                 alt={'拖拽区域'}
                 draggable={false}
@@ -243,14 +248,10 @@ export default function PictureSignature({
                           left: g.x,
                         }}
                       >
-                      <div className={styles.draggableIcon}
-                           data-mes={g.key}
-                           draggable={true}>
+                        <div className={styles.draggableIcon} data-mes={g.key} draggable={true}>
                           <Icon type="scissor" />
                         </div>
-                      <ShowItem {...g}
-                                basicUrl={basicUrl}
-                      />
+                        <ShowItem {...g} basicUrl={basicUrl} />
                       </div>
                     );
                   })}
@@ -261,6 +262,9 @@ export default function PictureSignature({
                 <img
                   src={basicUrl + fileInfo?.path}
                   alt={fileInfo.name}
+                  style={{
+                    width: `${showImageWidth}px`,
+                  }}
                 />
               </div>
             )}
@@ -272,29 +276,31 @@ export default function PictureSignature({
 }
 
 export function SignArray(props) {
-  const {value, onChange, basicUrl, json, form} = props;
+  const { value, onChange, basicUrl, json, form } = props;
   // console.log(props);
   let files = value?.files || [];
   const onChangeFile = (newFielInfo, imageIndex) => {
-    if(newFielInfo && newFielInfo.path){
+    if (newFielInfo && newFielInfo.path) {
       files[imageIndex] = newFielInfo;
       value.files = files;
       onChange(value);
     }
-  }
+  };
   // console.log(value, '222222222222222')
-  return <div>
-    {
-      files.map((g, index) => {
-        return <PictureSignature json={json}
+  return (
+    <div>
+      {files.map((g, index) => {
+        return (
+          <PictureSignature
+            json={json}
             basicUrl={basicUrl}
             fileInfo={g}
             form={form}
             imageIndex={index}
             onChangeFile={onChangeFile}
-
           />
-      })
-    }
+        );
+      })}
     </div>
+  );
 }

one_stop_public/libs/PictureSignature/styles.less

@@ -29,7 +29,7 @@
   place-items: center;
   //min-height: 800px;
   img{
-    width: 1200px;
+    //width: 1200px;
     height: auto;
   }
 }