feat: resolve image size

pull/25/head
fantasticit 2022-04-02 17:57:10 +08:00
parent ffd8041046
commit 28f7c21b54
3 changed files with 16 additions and 6 deletions

View File

@ -52,3 +52,16 @@ export const normalizeFileType = (fileType): FileType => {
return 'file';
};
export const getImageWidthHeight = (url: string): Promise<{ width: number | string; height: number | string }> => {
return new Promise((resolve) => {
const img = document.createElement('img');
img.onload = () => {
resolve({ width: img.width, height: img.height });
};
img.onerror = () => {
resolve({ width: 'auto', height: 'auto' });
};
img.src = url;
});
};

View File

@ -6,8 +6,4 @@
border-radius: var(--border-radius);
justify-content: space-between;
align-items: center;
&:hover {
border: 1px solid var(--semi-color-link);
}
}

View File

@ -5,7 +5,7 @@ import cls from 'classnames';
import { Typography, Spin } from '@douyinfe/semi-ui';
import { useToggle } from 'hooks/use-toggle';
import { uploadFile } from 'services/file';
import { extractFileExtension, extractFilename } from '../../services/file';
import { extractFileExtension, extractFilename, getImageWidthHeight } from '../../services/file';
import styles from './index.module.scss';
const { Text } = Typography;
@ -36,7 +36,8 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
toggleLoading(true);
try {
const src = await uploadFile(file);
updateAttributes({ ...fileInfo, src });
const size = await getImageWidthHeight(file);
updateAttributes({ ...fileInfo, ...size, src });
toggleLoading(false);
} catch (error) {
updateAttributes({ error: '图片上传失败:' + (error && error.message) || '未知错误' });