233

one_stop_public/libs/PictureSignature/PictureSignature.js

 import React, {useState, useEffect, useRef} from 'react';
 import styles from './styles.less';
 import {Modal, Button, Icon, message} from 'antd';
-import ShowItem, {dragEventList} from './ShowItem';
+import ShowItem, {dragEventList, zipImage} from './ShowItem';
 import {apiRequest} from "../../utils/request";
-import {getContainer} from "../../utils/utils";
+import {deepCopy} from "@/webPublic/one_stop_public/utils/myutils";
 
 let fakeFileInfo = {
-  path: '/u/202112/22111913hyia.png',
-  name: '摇摇后摇',
+  path: '/u/202112/25143111x0ki.jpg', // 超大的图片
+  name: '摇摇后摇.jpg',
 };
 
 
@@ -20,35 +20,51 @@ export default function PictureSignature({
                                            ...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({
-    width: 100,
-    height: 100,
-  });
+  const [imageInfo, setImageInfo] = useState(null);
   const changeShowModal = () => {
+    if(!showModal){
+      if (!imageInfo && !disabled) {
+        zipImage(fileInfo.path, fileInfo.name, otherProps?.backgroundImageWidth).then((res) => {
+          let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
+          image.src = basicUrl + res;
+          image.onload = () => {
+            // alert(image.width);
+            setImageInfo({
+              width: image.width,
+              height: image.height,
+            });
+          };
+          setFileInfo({
+            path: res,
+            name: fileInfo.name,
+            originPath: res,
+          });
+        });
+      }
+    }
     setShowModal(!showModal);
   };
   // console.log(json);
 
+  useEffect(() => {
+    if (otherProps?.signConfig && !imageRef?.current) {
+      imageRef.current = true;
+      dragEventList(setOtherProps, otherProps);
+    }
+
+  }, [otherProps]);
+
   useEffect(() => {
     if (json.otherProps) {
       try {
         let func = new Function(json.otherProps);
         let otherPropsX = func();
         setOtherProps(otherPropsX);
-        dragEventList(setOtherProps, otherPropsX);
-        let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
-        image.src = basicUrl + fileInfo?.path;
-        image.onload = () => {
-          setImageInfo({
-            width: image.width,
-            height: image.height,
-          });
-        };
         // console.log(otherPropsX);
       } catch (e) {
         console.log('签章组件 其余配置项出错,没有返回一个正确的值');
@@ -57,25 +73,37 @@ export default function PictureSignature({
     }
   }, [json.otherProps]);
 
-  const {ModalProps, signConfig, footerButtons, originButtons} = otherProps;
+  const {ModalProps, signConfig, footerButtons, originButtons, backgroundImageWidth} = otherProps;
 
   const handleClickButton = (clickType) => {
     switch (clickType) {
-      case 'startEdit':
+      case 'startEdit': // 开始签章
+        console.log(imageInfo);
         setOpenEdit(true);
         break;
-      case 'confirm':
+      case 'confirm': // 确定
         onChangeFile({...fileInfo});
         changeShowModal();
         break;
-      case 'save':
+      case 'save': // 保存签章
+        let ratioX = backgroundImageWidth / 1200; // 本来是 1500 的 图片 宽度变成了 1200 高度变成了 1200/1500 * imageInfo.height;
+        // let ratioY = 1200 / backgroundImageWidth * imageInfo.height;
+        console.log(ratioX);
+        // return ;
+        let signConfig = deepCopy(otherProps.signConfig);
         apiRequest('/ImageLibApi/merge', {
           background: fileInfo?.path,
           content: JSON.stringify({
-            objs: otherProps.signConfig.map((g) => {
-              if(g.type === 'text'){
-                g.y = g.y + g.fontSize;
+            objs: signConfig.map((g) => {
+              // 1200 的 x => 1500的 x
+              //
+              g.x = parseInt(g.x * ratioX, 10);
+              g.y = parseInt(g.y * ratioX, 10);
+              if (g.type === 'text') {
+                g.y = g.y + 20;
+                g.x = g.x + 20;
               }
+              console.log(g);
               return g;
             }),
           }),
@@ -90,7 +118,7 @@ export default function PictureSignature({
           }
         })
         break;
-      case 'restore':
+      case 'restore': // 还原图片
         if (fileInfo.originPath) {
           fileInfo.path = fileInfo.originPath;
           setFileInfo({...fileInfo});
@@ -137,9 +165,9 @@ export default function PictureSignature({
   if (!fileInfo) {
     return null;
   }
-
+  console.log(imageInfo, fileInfo);
   return (
-    <div className={styles.outSideDiv} ref={imageRef}
+    <div className={styles.outSideDiv}
     >
       {fileInfo && fileInfo?.path && (
         <img
@@ -155,16 +183,15 @@ export default function PictureSignature({
           destroyOnClose={true}
           maskClosable={false}
           onCancel={changeShowModal}
-          // getContainer={() => {getContainer(imageRef.current)}}
-          getContainer={false}
+          // getContainer={false}
           className={styles.ModalClass}
           footer={<Footer/>}
           title={'图片签章'}
-          width={'90vw'}
+          width={'1250px'}
           bodyStyle={{
-            minHeight: '800px',
+            minHeight: '700px',
             overflow: 'auto',
-            padding: '20px',
+            padding: '5px',
             maxWidth: '99%',
             maxHeight: '99%',
           }}
@@ -176,8 +203,8 @@ export default function PictureSignature({
                 className={styles.modalDiv}
                 style={{
                   backgroundImage: `url(${basicUrl + fileInfo?.path})`,
-                  width: imageInfo.width,
-                  height: imageInfo.height,
+                  width: 1200,
+                  height: (imageInfo.height / (imageInfo.width / 1200)),
                 }}
                 alt={'拖拽区域'}
                 draggable={false}
@@ -196,7 +223,8 @@ export default function PictureSignature({
                         left: g.x,
                       }}
                     >
-                      <div className={styles.draggableIcon} draggable={true}>
+                      <div className={styles.draggableIcon}
+                           draggable={true}>
                         <Icon type="edit"/>
                       </div>
                       <ShowItem {...g}
@@ -222,13 +250,13 @@ export default function PictureSignature({
   );
 }
 
-export function SignArray(props){
-  const {value, onChange, basicUrl, json,  } = props;
+export function SignArray(props) {
+  const {value, onChange, basicUrl, json,} = props;
   // console.log(props);
   let files = value?.files || [];
   const onChangeFile = (newFielInfo) => {
-    for(let item of files){
-      if((item.path || item.originPath) === newFielInfo.originPath){
+    for (let item of files) {
+      if ((item.path || item.originPath) === newFielInfo.originPath) {
         item = newFielInfo;
       }
     }

one_stop_public/libs/PictureSignature/ShowItem.js

 import React from "react";
+import {queryApiActionPath} from "@/webPublic/one_stop_public/utils/queryConfig";
+import {apiRequest} from "@/webPublic/one_stop_public/utils/request";
+import {getToken} from "@/webPublic/one_stop_public/utils/token";
 
 const ShowItem = ({ basicUrl, type, x, y, ...otherInfo }) => {
   switch (type) {
@@ -75,6 +78,7 @@ export const dragEventList = (setOtherProps, otherProps) => {
       // 阻止默认动作（如打开一些元素的链接）
       event.preventDefault();
       // 将拖动的元素到所选择的放置目标节点中
+      // console.log('drop');
       if (event.target.id === 'dropZone') {
         let left = event.offsetX;
         if (left > event.target.offsetWidth - draggedRef.offsetWidth - 10) {
@@ -93,7 +97,7 @@ export const dragEventList = (setOtherProps, otherProps) => {
         // top = top - (item.y / 2);
         item.x = left;
         item.y = top;
-        console.log(left, top);
+        // console.log(left, top);
         setOtherProps({
           ...otherProps,
           signConfig: otherProps.signConfig,
@@ -107,4 +111,76 @@ export const dragEventList = (setOtherProps, otherProps) => {
   );
 }
 
+const uploadFile = (file) => {
+  let url = queryApiActionPath() + '/upload?token=' + getToken();
+  const formData = new FormData();
+  formData.append('file', file);
+ return fetch(url, {
+    method: 'POST',
+    headers: {
+      Accept: '*/*',
+    },
+    body: formData,
+  })
+    .then((res) => {
+      return res.text();
+    })
+    .then((res) => {
+      return res;
+    })
+}
+
+
+// 将图片宽度确定 高度按比例调整后返回一张新的图片
+export const zipImage = (path, fileName, limitWidth = 1200) => {
+  return new Promise((resolve, reject) => {
+    let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
+    let imageUrl = queryApiActionPath()  + path;
+    image.setAttribute("crossOrigin",'Anonymous');
+    image.src = imageUrl;
+    image.onload = () => {
+      // console.log('123');
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      const imageWidth = limitWidth;
+      const ratio = image.width / limitWidth;  // 按宽度固定 压缩图片
+      if(ratio === 1 || isNaN(ratio)){
+        resolve(path);
+        return true;
+      }
+      const imageHeight = parseInt(image.height / ratio, 10);
+      let data = '';
+      canvas.width = imageWidth;
+      canvas.height = imageHeight;
+      // console.log(imageWidth, imageHeight);
+      context.drawImage(image, 0, 0, imageWidth, imageHeight);
+      data = canvas.toDataURL('image/jpeg');
+      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 });
+      };
+      let file = dataURLtoFile(data, fileName);
+      uploadFile(file).then((res) => {
+        if(res){
+          resolve(res);
+        }else{
+          resolve(path);
+        }
+      });
+      //压缩完成
+    };
+  });
+
+
+};
+
+
 export default ShowItem

one_stop_public/libs/PictureSignature/styles.less

 .outSideDiv{
-  display: grid;
-  grid-template-rows: 1fr;
-  grid-auto-flow: column;
-  justify-items: center;
-  align-items: center;
+  display: inline-block;
+  padding-left: 20px;
   .onePic{
     width: 100px;
     height: auto;
@@ -13,14 +10,14 @@
 
 .modalDiv{
   display: grid;
-  width: 100%;
+  //width: 1200px;
   //grid-template-columns: 100px 1fr;
   //grid-template-rows;
   position: relative;
   overflow: auto;
   background-repeat: no-repeat;
   background-position: center;
-
+  background-size: cover;
   .rightSide{
     overflow: auto;
   }
@@ -30,9 +27,9 @@
   width: 100%;
   display: grid;
   place-items: center;
-  min-height: 800px;
+  //min-height: 800px;
   img{
-    max-width: 1300px;
+    width: 1200px;
     height: auto;
   }
 }
@@ -63,4 +60,6 @@
   position: absolute;
   left: 10;
   top: 10;
+  //border: 1px solid #f2f2f2;
+  color: red;
 }

one_stop_public/utils/myutils.js

 import { EditorState, convertFromRaw, convertToRaw, CompositeDecorator } from 'draft-js';
-import { message } from 'antd';
 import { stateToHTML } from 'draft-js-export-html';
 import moment from 'moment';
-import { isJSON } from '@/webPublic/one_stop_public/copy';
 import React from "react";
 
 function findLinkEntities(contentBlock, callback, contentState) {