488 lines
19 KiB
JavaScript
488 lines
19 KiB
JavaScript
var __create = Object.create;
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __getProtoOf = Object.getPrototypeOf;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
// file that has been converted to a CommonJS file using a Babel-
|
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
mod
|
|
));
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// src/BigImagePreview/BigImagePreview.tsx
|
|
var BigImagePreview_exports = {};
|
|
__export(BigImagePreview_exports, {
|
|
BigImagePreview: () => BigImagePreview,
|
|
default: () => BigImagePreview_default
|
|
});
|
|
module.exports = __toCommonJS(BigImagePreview_exports);
|
|
var import_react = __toESM(require("react"));
|
|
var import_classnames = __toESM(require("classnames"));
|
|
var import_hooks = require("@zhst/hooks");
|
|
var import_func = require("@zhst/func");
|
|
var import_rc_align = __toESM(require("rc-align"));
|
|
var import_antd = require("antd");
|
|
var import_iconfont = __toESM(require("../iconfont"));
|
|
var import_ImageEditor = require("../ImageEditor");
|
|
var import_BtnGroup = __toESM(require("./components/BtnGroup"));
|
|
var import_index = require("./index.less");
|
|
var import_ScreenhotButtons = __toESM(require("./components/ScreenhotButtons"));
|
|
var import_constants = require("../utils/constants");
|
|
var componentName = `zhst-image__img-view`;
|
|
var cropBtnDataSource = [
|
|
{
|
|
key: "close",
|
|
icon: "icon-danchuangguanbi",
|
|
title: "退出"
|
|
},
|
|
{
|
|
key: "autoCrop",
|
|
icon: "icon-zidong",
|
|
title: "智能框选"
|
|
},
|
|
{
|
|
key: "customCrop",
|
|
icon: "icon-shoudong",
|
|
title: "手动框选"
|
|
}
|
|
];
|
|
var operateBtnDataSource = [
|
|
{
|
|
key: "zoomOut",
|
|
icon: "icon-fangda",
|
|
title: "放大"
|
|
},
|
|
{
|
|
key: "zoomIn",
|
|
icon: "icon-suoxiao",
|
|
title: "缩小"
|
|
},
|
|
{
|
|
key: "reset",
|
|
icon: "icon-zhongzhi3",
|
|
title: "重置图片"
|
|
}
|
|
];
|
|
var BigImagePreview = import_react.default.forwardRef((props, ref) => {
|
|
var _a, _b;
|
|
const {
|
|
dataSource = [],
|
|
width,
|
|
height,
|
|
showScore = true,
|
|
objects = [],
|
|
showOpt = false,
|
|
showAttachImgLabel = true,
|
|
screenshotButtonAlign = import_constants.defaultAlignOption,
|
|
screenshotButtonRender = (0, import_ScreenhotButtons.default)({
|
|
onBigImageActionClick: () => {
|
|
},
|
|
disableBtn: []
|
|
}),
|
|
hideLeftTopBtn = true,
|
|
viewOption = {}
|
|
} = props;
|
|
const imgContainerRef = import_react.default.useRef(null);
|
|
const [isReady, setIsReady] = (0, import_react.useState)(false);
|
|
const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
|
|
console.log("props", props);
|
|
const init = (0, import_react.useCallback)(($container) => {
|
|
imgContainerRef.current = $container;
|
|
setIsReady(true);
|
|
}, []);
|
|
const imgInsRef = (0, import_react.useRef)(null);
|
|
const [isImgReady, setIsImgReady] = (0, import_react.useState)(false);
|
|
(0, import_react.useEffect)(() => {
|
|
var _a2;
|
|
console.log("123", 123);
|
|
if (!isReady || !(imgContainerRef == null ? void 0 : imgContainerRef.current))
|
|
return;
|
|
const handleReady = (0, import_func.addEventListenerWrapper)(imgContainerRef.current, import_ImageEditor.EVENT_VIEWER_READY, () => {
|
|
setIsImgReady(true);
|
|
});
|
|
const handleTransformChange = (0, import_func.addEventListenerWrapper)(
|
|
imgContainerRef.current,
|
|
import_ImageEditor.EVENT_VIEWER_TRANSFORM_CHANGE,
|
|
() => {
|
|
}
|
|
);
|
|
imgInsRef.current = new import_ImageEditor.Viewer(imgContainerRef.current, {
|
|
...viewOption,
|
|
fitScaleAsMinScale: true,
|
|
image: (0, import_func.generateImg)((_a2 = dataSource[currentIndex]) == null ? void 0 : _a2.imageKey)
|
|
});
|
|
return () => {
|
|
var _a3, _b2;
|
|
handleReady == null ? void 0 : handleReady.remove();
|
|
handleTransformChange == null ? void 0 : handleTransformChange.remove();
|
|
(_b2 = (_a3 = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a3.destroy) == null ? void 0 : _b2.call(_a3);
|
|
imgInsRef.current = null;
|
|
};
|
|
}, [isReady, currentIndex]);
|
|
const handleOptClick = (v) => {
|
|
var _a2, _b2, _c, _d, _e, _f;
|
|
switch (v) {
|
|
case "zoomOut":
|
|
(_b2 = (_a2 = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _a2.scaleTo) == null ? void 0 : _b2.call(_a2, 0.1);
|
|
break;
|
|
case "zoomIn":
|
|
(_d = (_c = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _c.scaleTo) == null ? void 0 : _d.call(_c, -0.1);
|
|
break;
|
|
case "reset":
|
|
(_f = (_e = imgInsRef == null ? void 0 : imgInsRef.current) == null ? void 0 : _e.reset) == null ? void 0 : _f.call(_e, -0.1);
|
|
break;
|
|
}
|
|
};
|
|
const cropInsRef = (0, import_react.useRef)(null);
|
|
const [showCrop, setShowCrop] = (0, import_react.useState)(showOpt);
|
|
const [cropType, setCropType] = (0, import_react.useState)(import_constants.CROP_TYPE["AUTO"]);
|
|
const [odList, setOdList] = (0, import_react.useState)([]);
|
|
const [extendOdList, setExtendOdList] = (0, import_react.useState)([]);
|
|
const [selectRectId, setSelectRectId] = (0, import_react.useState)(null);
|
|
const alginContainerRef = (0, import_react.useRef)(null);
|
|
const alignRef = (0, import_react.useRef)(null);
|
|
const [cropRect, setCropRect] = (0, import_react.useState)(null);
|
|
const [selectAlgorithmVersion, setSelectAlgorithmVersion] = (0, import_react.useState)(null);
|
|
const handlerCropStartRef = (0, import_react.useRef)(null);
|
|
const handlerCropEndRef = (0, import_react.useRef)(null);
|
|
const handleShapeSelectRef = (0, import_react.useRef)(null);
|
|
(0, import_react.useEffect)(() => {
|
|
initData(dataSource[currentIndex].objects || objects);
|
|
return () => {
|
|
var _a2, _b2, _c, _d, _e, _f, _g;
|
|
(_b2 = (_a2 = imgInsRef.current) == null ? void 0 : _a2.clearShape) == null ? void 0 : _b2.call(_a2);
|
|
(_c = handlerCropStartRef.current) == null ? void 0 : _c.remove();
|
|
(_d = handlerCropEndRef.current) == null ? void 0 : _d.remove();
|
|
(_e = handleShapeSelectRef.current) == null ? void 0 : _e.remove();
|
|
(_g = (_f = cropInsRef == null ? void 0 : cropInsRef.current) == null ? void 0 : _f.destroy) == null ? void 0 : _g.call(_f);
|
|
cropInsRef.current = null;
|
|
};
|
|
}, [isImgReady, showCrop, cropType, currentIndex]);
|
|
const initData = (_objects) => {
|
|
var _a2, _b2;
|
|
const imgIns = imgInsRef.current;
|
|
const _odRect = dataSource[currentIndex].odRect;
|
|
setCropRect(null);
|
|
if (!isImgReady)
|
|
return;
|
|
if (!showCrop) {
|
|
(_a2 = imgIns == null ? void 0 : imgIns.addShape) == null ? void 0 : _a2.call(imgIns, {
|
|
x: (0, import_func.get)(_odRect, "x", 0),
|
|
y: (0, import_func.get)(_odRect, "y", 0),
|
|
w: (0, import_func.get)(_odRect, "w", 0),
|
|
h: (0, import_func.get)(_odRect, "h", 0),
|
|
selectAble: false
|
|
});
|
|
return;
|
|
}
|
|
if (cropType === import_constants.CROP_TYPE["AUTO"]) {
|
|
const handleGetOD = (odList2) => {
|
|
const imgSize = imgIns.getImgSize();
|
|
const shapeList = odList2.map((rect2) => ({
|
|
...rect2,
|
|
selectAble: true,
|
|
id: rect2["id"],
|
|
algorithmVersion: rect2.algorithmVersion
|
|
}));
|
|
imgIns.replaceShape(shapeList);
|
|
const extendRect = shapeList.map((rect2) => {
|
|
const _extendRect = (0, import_func.getExtendRect)(rect2, imgSize.w, imgSize.h, rect2.algorithmVersion);
|
|
return { ...rect2, ..._extendRect };
|
|
});
|
|
setExtendOdList(extendRect);
|
|
imgIns.replaceShape(shapeList);
|
|
handleShapeSelectRef.current = (0, import_func.addEventListenerWrapper)(imgContainerRef.current, "shape-select", (e) => {
|
|
const id = e.detail;
|
|
setSelectRectId(id);
|
|
const selectShape = shapeList.find((v) => v["id"] === id);
|
|
if (selectShape) {
|
|
setSelectAlgorithmVersion(selectShape["algorithmVersion"]);
|
|
const axisRect = imgIns.imgRectAxisToCanvasAxisRect(selectShape);
|
|
const rect2 = {
|
|
x: axisRect.x2 > axisRect.x ? axisRect.x : axisRect.x2,
|
|
y: axisRect.y2 > axisRect.y ? axisRect.y : axisRect.y2,
|
|
w: Math.abs(axisRect.x2 - axisRect.x),
|
|
h: Math.abs(axisRect.y2 - axisRect.y)
|
|
};
|
|
setCropRect(rect2);
|
|
} else {
|
|
setCropRect(null);
|
|
}
|
|
});
|
|
};
|
|
const rect = (0, import_func.getOdRect)({ objects: _objects });
|
|
setOdList(rect);
|
|
handleGetOD(rect);
|
|
}
|
|
if (cropType === import_constants.CROP_TYPE["CUSTOM"]) {
|
|
(_b2 = imgIns == null ? void 0 : imgIns.clearShape) == null ? void 0 : _b2.call(imgIns);
|
|
handlerCropStartRef.current = (0, import_func.addEventListenerWrapper)(imgContainerRef.current, import_ImageEditor.EVENT_CROP_START, () => {
|
|
setSelectAlgorithmVersion(null);
|
|
setCropRect(null);
|
|
});
|
|
handlerCropEndRef.current = (0, import_func.addEventListenerWrapper)(imgContainerRef.current, import_ImageEditor.EVENT_CROP_END, (event) => {
|
|
var _a3, _b3;
|
|
const data = event.detail;
|
|
setSelectAlgorithmVersion(null);
|
|
setCropRect({
|
|
x: data.left,
|
|
y: data.top,
|
|
w: data.width,
|
|
h: data.height
|
|
});
|
|
(_b3 = (_a3 = alignRef == null ? void 0 : alignRef.current) == null ? void 0 : _a3.forceAlign) == null ? void 0 : _b3.call(_a3);
|
|
});
|
|
cropInsRef.current = new import_ImageEditor.Cropper(imgContainerRef.current, {
|
|
showMask: true,
|
|
viewer: imgIns
|
|
});
|
|
}
|
|
};
|
|
const latestCropType = (0, import_hooks.useLatest)(cropType);
|
|
const latestImgKey = (0, import_hooks.useLatest)(dataSource[currentIndex].imageKey);
|
|
const latestCropRect = (0, import_hooks.useLatest)(cropRect);
|
|
const getCropInfo = async () => {
|
|
const cropType2 = latestCropType.current;
|
|
const cropRect2 = latestCropRect.current;
|
|
const imgIns = imgInsRef.current;
|
|
const transform = imgIns.targetTransform;
|
|
let newImgKey = latestImgKey.current;
|
|
let rectList = [];
|
|
let extendRectList = [];
|
|
let selectIndex = 0;
|
|
switch (cropType2) {
|
|
case import_constants.CROP_TYPE["AUTO"]:
|
|
const shapes = imgIns.getSelectShape();
|
|
const shapeIds = shapes.map((v) => v["id"]);
|
|
rectList = odList.filter((v) => shapeIds.includes(v["id"])).map((item) => {
|
|
if (item.algorithmVersion === "OBJECT_TYPE_FACE" || item.objectType === "OBJECT_TYPE_FACE") {
|
|
if (!(0, import_func.isNull)(item.extendBox)) {
|
|
return {
|
|
...item,
|
|
w: (0, import_func.get)(item, "extendBox.w"),
|
|
h: (0, import_func.get)(item, "extendBox.h"),
|
|
x: (0, import_func.get)(item, "extendBox.x"),
|
|
y: (0, import_func.get)(item, "extendBox.y")
|
|
};
|
|
}
|
|
} else {
|
|
return item;
|
|
}
|
|
});
|
|
extendRectList = extendOdList.filter((v) => shapeIds.includes(v["id"])).map((v) => (0, import_func.pick)(v, ["x", "y", "w", "h", "algorithmVersion", "id"]));
|
|
selectIndex = rectList.findIndex((v) => v["id"] === selectRectId);
|
|
break;
|
|
default:
|
|
const newRect = (0, import_func.getTransformRect)(imgIns.image, transform, cropRect2);
|
|
if ((0, import_func.get)(transform, "rotate", 0) % 360 != 0) {
|
|
const data = (0, import_func.getRotateImg)(imgIns.image, (0, import_func.get)(transform, "rotate", 0));
|
|
newImgKey = await (0, import_func.upload)(data);
|
|
}
|
|
rectList.push(newRect);
|
|
extendRectList.push(newRect);
|
|
break;
|
|
}
|
|
await Promise.all(
|
|
extendRectList.map(async (rect, index) => {
|
|
const file = await (0, import_func.getFileByRect)(imgIns.image, rect);
|
|
const imgKey = await (0, import_func.upload)(file);
|
|
extendRectList[index] = { ...rect, imgKey };
|
|
})
|
|
);
|
|
await Promise.all(
|
|
rectList.map(async (rect, index) => {
|
|
const faceCorrectImage = rect["faceCorrectImage"];
|
|
let faceCorrectImageKey;
|
|
if (faceCorrectImage) {
|
|
const base64 = `data:image/jpg;base64,${faceCorrectImage}`;
|
|
const blobData = (0, import_func.dataURLToBlob)(base64);
|
|
const file = new window.File([blobData], `${(/* @__PURE__ */ new Date()).getTime()}`);
|
|
faceCorrectImageKey = await (0, import_func.upload)(file);
|
|
}
|
|
const newRect = {
|
|
...rect,
|
|
...faceCorrectImageKey ? { faceCorrectImageKey } : {}
|
|
};
|
|
delete newRect["faceCorrectImage"];
|
|
rectList[index] = newRect;
|
|
})
|
|
);
|
|
return { rectList, extendRectList, selectIndex, imgKey: newImgKey };
|
|
};
|
|
const handleCropBtnClick = (v) => {
|
|
switch (v) {
|
|
case "close":
|
|
setShowCrop(false);
|
|
break;
|
|
case "autoCrop":
|
|
setCropType(import_constants.CROP_TYPE["AUTO"]);
|
|
break;
|
|
case "customCrop":
|
|
setCropType(import_constants.CROP_TYPE["CUSTOM"]);
|
|
break;
|
|
}
|
|
};
|
|
const [selectAttachImgIndex, setSelectAttachImgIndex] = (0, import_react.useState)(0);
|
|
const [isZoomin, setIsZoomin] = (0, import_react.useState)(false);
|
|
const handleChangeIndex = (diff) => {
|
|
var _a2;
|
|
const _index = currentIndex + diff;
|
|
if (!((_a2 = dataSource == null ? void 0 : dataSource[_index]) == null ? void 0 : _a2.imageKey))
|
|
return;
|
|
setCurrentIndex(_index);
|
|
};
|
|
(0, import_react.useImperativeHandle)(ref, () => ({
|
|
imgInsRef,
|
|
setShowCrop,
|
|
initData,
|
|
getCropInfo,
|
|
handleChangeIndex
|
|
}));
|
|
return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}`), style: { height, width } }, dataSource.length ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
|
"div",
|
|
{
|
|
className: (0, import_classnames.default)(
|
|
`${componentName}-main`,
|
|
cropType === import_constants.CROP_TYPE["AUTO"] && `${componentName}-main--cursor`
|
|
),
|
|
ref: init
|
|
}
|
|
), !hideLeftTopBtn && /* @__PURE__ */ import_react.default.createElement(
|
|
import_BtnGroup.default,
|
|
{
|
|
className: (0, import_classnames.default)(`${componentName}-opt`),
|
|
dataSource: operateBtnDataSource,
|
|
onClick: handleOptClick,
|
|
placement: "left"
|
|
}
|
|
), showCrop && /* @__PURE__ */ import_react.default.createElement(
|
|
import_BtnGroup.default,
|
|
{
|
|
circle: true,
|
|
className: (0, import_classnames.default)(`${componentName}-crop-opt`),
|
|
dataSource: cropBtnDataSource,
|
|
onClick: handleCropBtnClick,
|
|
selectKey: cropType === import_constants.CROP_TYPE["AUTO"] ? "autoCrop" : "customCrop"
|
|
}
|
|
), showCrop && cropRect && screenshotButtonRender && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
|
"div",
|
|
{
|
|
ref: alginContainerRef,
|
|
className: (0, import_classnames.default)(`${componentName}-align`),
|
|
style: Object.assign(
|
|
{
|
|
width: cropRect.w,
|
|
height: cropRect.h
|
|
},
|
|
(0, import_func.getTransforms)({
|
|
translateX: cropRect.x,
|
|
translateY: cropRect.y
|
|
})
|
|
)
|
|
}
|
|
), /* @__PURE__ */ import_react.default.createElement(
|
|
import_rc_align.default,
|
|
{
|
|
ref: alignRef,
|
|
monitorWindowResize: true,
|
|
align: screenshotButtonAlign,
|
|
target: function() {
|
|
return alginContainerRef.current;
|
|
}
|
|
},
|
|
screenshotButtonRender({
|
|
model: "IMAGE",
|
|
getCropInfo,
|
|
setShowCrop,
|
|
cropType,
|
|
selectAlgorithmVersion
|
|
})
|
|
)), ((_a = dataSource[currentIndex].attachImg) == null ? void 0 : _a.length) && !showCrop && /* @__PURE__ */ import_react.default.createElement(
|
|
"div",
|
|
{
|
|
className: (0, import_classnames.default)(
|
|
`${componentName}-attach`,
|
|
isZoomin && `${componentName}-attach--zoomin`,
|
|
`${componentName}-attach--fixed`,
|
|
isZoomin && `${componentName}-attach--zoomin--fixed`
|
|
)
|
|
},
|
|
/* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}-attach__tab`) }, showAttachImgLabel ? (_b = dataSource[currentIndex].attachImg) == null ? void 0 : _b.map(({ label }, index) => /* @__PURE__ */ import_react.default.createElement(
|
|
"div",
|
|
{
|
|
key: index,
|
|
className: (0, import_classnames.default)(
|
|
`${componentName}-attach__tab-item`,
|
|
selectAttachImgIndex === index && `${componentName}-attach__tab-item--select`
|
|
),
|
|
onMouseEnter: () => {
|
|
setSelectAttachImgIndex(index);
|
|
}
|
|
},
|
|
label
|
|
)) : null),
|
|
/* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${componentName}-attach__scale`) }, /* @__PURE__ */ import_react.default.createElement(
|
|
import_antd.Button,
|
|
{
|
|
type: "text",
|
|
onMouseDown: (e) => {
|
|
if (e.button == 0) {
|
|
setIsZoomin((pre) => !pre);
|
|
}
|
|
},
|
|
style: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
/* @__PURE__ */ import_react.default.createElement(
|
|
import_iconfont.default,
|
|
{
|
|
styles: { display: "flex" },
|
|
icon: isZoomin ? "icon-cancle_fullscreen" : "icon-fullscreen"
|
|
}
|
|
)
|
|
)),
|
|
/* @__PURE__ */ import_react.default.createElement(
|
|
"img",
|
|
{
|
|
draggable: "false",
|
|
className: (0, import_classnames.default)(
|
|
`${componentName}-attach__img`,
|
|
`${componentName}-attach__img--fixed`
|
|
),
|
|
src: (0, import_func.get)(dataSource[currentIndex].attachImg, `${selectAttachImgIndex}.url`, "")
|
|
}
|
|
)
|
|
), showScore && /* @__PURE__ */ import_react.default.createElement(
|
|
"div",
|
|
{
|
|
style: { bottom: 20 },
|
|
className: (0, import_classnames.default)(`${componentName}__face-score`)
|
|
},
|
|
`人脸质量分：${Number(dataSource[currentIndex].score).toFixed(2)}`
|
|
)) : /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE, description: "暂无数据" }));
|
|
});
|
|
BigImagePreview.displayName = "BigImagePreview";
|
|
var BigImagePreview_default = BigImagePreview;
|
|
// Annotate the CommonJS export names for ESM import in node:
|
|
0 && (module.exports = {
|
|
BigImagePreview
|
|
});
|