haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-17 07:41:26 +00:00
Code Issues Releases Wiki Activity

feat: image light ocr (#7224)

Browse Source 
* feat: image light ocr

* feat: optimize code

* feat: update code

* feat: update imagelight version

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
杨国璇
2024-12-23 11:02:39 +08:00
committed by GitHub
parent 49bd39f7df
commit 6247a27ef6
22 changed files with 384 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/src/components/dialog/image-dialog.js
View File

@@ -1,10 +1,69 @@
import React from 'react';
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
import Lightbox from '@seafile/react-image-lightbox';
import { useMetadataOperations } from '../../hooks/metadata-operation';
import { SYSTEM_FOLDERS } from '../../constants';
import '@seafile/react-image-lightbox/style.css';
const propTypes = {
const ImageDialog = ({ enableRotate: oldEnableRotate, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage }) => {
const { onOCR } = useMetadataOperations();
const downloadImage = useCallback((url) => {
location.href = url;
}, []);
const onViewOriginal = useCallback(() => {
window.open(imageItems[imageIndex].url, '_blank');
}, [imageItems, imageIndex]);
const imageItemsLength = imageItems.length;
if (imageItemsLength === 0) return null;
const name = imageItems[imageIndex].name;
const mainImg = imageItems[imageIndex];
const nextImg = imageItems[(imageIndex + 1) % imageItemsLength];
const prevImg = imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength];
// The backend server does not support rotating HEIC images
let enableRotate = oldEnableRotate;
const suffix = mainImg.src.slice(mainImg.src.lastIndexOf('.') + 1, mainImg.src.lastIndexOf('?')).toLowerCase();
if (suffix === 'heic') {
enableRotate = false;
}
const isSystemFolder = SYSTEM_FOLDERS.find(folderPath => mainImg.parentDir.startsWith(folderPath));
return (
<Lightbox
wrapperClassName='custom-image-previewer'
imageTitle={`${name} (${imageIndex + 1}/${imageItemsLength})`}
mainSrc={mainImg.thumbnail || mainImg.src}
nextSrc={nextImg.thumbnail || nextImg.src}
prevSrc={prevImg.thumbnail || prevImg.src}
onCloseRequest={closeImagePopup}
onMovePrevRequest={moveToPrevImage}
onMoveNextRequest={moveToNextImage}
imagePadding={70}
imageLoadErrorMessage={gettext('The image could not be loaded.')}
prevLabel={gettext('Previous (Left arrow key)')}
nextLabel={gettext('Next (Right arrow key)')}
closeLabel={gettext('Close (Esc)')}
zoomInLabel={gettext('Zoom in')}
zoomOutLabel={gettext('Zoom out')}
enableRotate={enableRotate}
onClickDownload={() => downloadImage(imageItems[imageIndex].downloadURL)}
onClickDelete={onDeleteImage ? () => onDeleteImage(name) : null}
onViewOriginal={onViewOriginal}
viewOriginalImageLabel={gettext('View original image')}
onRotateImage={(onRotateImage && enableRotate) ? (angle) => onRotateImage(imageIndex, angle) : null}
onOCR={onOCR && !isSystemFolder ? () => onOCR(mainImg.parentDir, mainImg.name) : null}
OCRLabel={gettext('OCR')}
/>
);
};
ImageDialog.propTypes = {
imageItems: PropTypes.array.isRequired,
imageIndex: PropTypes.number.isRequired,
closeImagePopup: PropTypes.func.isRequired,
@@ -15,60 +74,6 @@ const propTypes = {
enableRotate: PropTypes.bool,
};
class ImageDialog extends React.Component {
downloadImage = (url) => {
location.href = url;
};
onViewOriginal = () => {
window.open(this.props.imageItems[this.props.imageIndex].url, '_blank');
};
render() {
const { imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage } = this.props;
const imageItemsLength = imageItems.length;
if (imageItemsLength === 0) return null;
const name = imageItems[imageIndex].name;
const mainImg = imageItems[imageIndex];
const nextImg = imageItems[(imageIndex + 1) % imageItemsLength];
const prevImg = imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength];
// The backend server does not support rotating HEIC images
let enableRotate = this.props.enableRotate;
const suffix = mainImg.src.slice(mainImg.src.lastIndexOf('.') + 1, mainImg.src.lastIndexOf('?')).toLowerCase();
if (suffix === 'heic') {
enableRotate = false;
}
return (
<Lightbox
wrapperClassName='custom-image-previewer'
imageTitle={`${name} (${imageIndex + 1}/${imageItemsLength})`}
mainSrc={mainImg.thumbnail || mainImg.src}
nextSrc={nextImg.thumbnail || nextImg.src}
prevSrc={prevImg.thumbnail || prevImg.src}
onCloseRequest={closeImagePopup}
onMovePrevRequest={moveToPrevImage}
onMoveNextRequest={moveToNextImage}
imagePadding={70}
imageLoadErrorMessage={gettext('The image could not be loaded.')}
prevLabel={gettext('Previous (Left arrow key)')}
nextLabel={gettext('Next (Right arrow key)')}
closeLabel={gettext('Close (Esc)')}
zoomInLabel={gettext('Zoom in')}
zoomOutLabel={gettext('Zoom out')}
enableRotate={enableRotate}
onClickDownload={() => this.downloadImage(imageItems[imageIndex].downloadURL)}
onClickDelete={onDeleteImage ? () => onDeleteImage(name) : null}
onViewOriginal={this.onViewOriginal}
viewOriginalImageLabel={gettext('View original image')}
onRotateImage={(onRotateImage && enableRotate) ? (angle) => onRotateImage(imageIndex, angle) : null}
/>
);
}
}
ImageDialog.propTypes = propTypes;
ImageDialog.defaultProps = {
enableRotate: true,
};