Skip to content

W
WebPublic
提交 3f57d382 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

233

上级 5ce01654
显示空白字符变更
内嵌 并排
正在显示 包含 153 行增加 和 52 行删除
one_stop_public/libs/PictureSignature/PictureSignature.js
浏览文件 @ 3f57d382
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
浏览文件 @ 3f57d382
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
浏览文件 @ 3f57d382
.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
浏览文件 @ 3f57d382
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) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论