mirror of
https://github.com/iib0011/omni-tools.git
synced 2025-09-22 15:39:31 +02:00
created pdf to png tool
This commit is contained in:
omenmn
152
src/components/result/ToolMultiFileResult.tsx
Normal file
152
src/components/result/ToolMultiFileResult.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import {
|
||||
Box,
|
||||
CircularProgress,
|
||||
Typography,
|
||||
useTheme,
|
||||
Button
|
||||
} from '@mui/material';
|
||||
import InputHeader from '../InputHeader';
|
||||
import greyPattern from '@assets/grey-pattern.png';
|
||||
import { globalInputHeight } from '../../config/uiConfig';
|
||||
import ResultFooter from './ResultFooter';
|
||||
|
||||
export default function ToolFileResult({
|
||||
title = 'Result',
|
||||
value,
|
||||
zipFile,
|
||||
loading,
|
||||
loadingText
|
||||
}: {
|
||||
title?: string;
|
||||
value: File[];
|
||||
zipFile?: File | null;
|
||||
loading?: boolean;
|
||||
loadingText?: string;
|
||||
}) {
|
||||
const theme = useTheme();
|
||||
|
||||
const getFileType = (
|
||||
file: File
|
||||
): 'image' | 'video' | 'audio' | 'pdf' | 'unknown' => {
|
||||
if (file.type.startsWith('image/')) return 'image';
|
||||
if (file.type.startsWith('video/')) return 'video';
|
||||
if (file.type.startsWith('audio/')) return 'audio';
|
||||
if (file.type.startsWith('application/pdf')) return 'pdf';
|
||||
return 'unknown';
|
||||
};
|
||||
|
||||
const handleDownload = (file: File) => {
|
||||
const url = URL.createObjectURL(file);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = file.name;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<InputHeader title={title} />
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxHeight: globalInputHeight,
|
||||
overflowY: 'auto',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
border: 1,
|
||||
borderRadius: 2,
|
||||
boxShadow: '5',
|
||||
bgcolor: 'background.paper',
|
||||
p: 2
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: globalInputHeight
|
||||
}}
|
||||
>
|
||||
<CircularProgress />
|
||||
<Typography variant="body2" sx={{ mt: 2 }}>
|
||||
{loadingText}... This may take a moment.
|
||||
</Typography>
|
||||
</Box>
|
||||
) : value.length > 0 ? (
|
||||
value.map((file, idx) => {
|
||||
const preview = URL.createObjectURL(file);
|
||||
const fileType = getFileType(file);
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={idx}
|
||||
sx={{
|
||||
backgroundImage:
|
||||
fileType === 'image' && theme.palette.mode !== 'dark'
|
||||
? `url(${greyPattern})`
|
||||
: 'none',
|
||||
p: 1,
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: 2
|
||||
}}
|
||||
>
|
||||
{fileType === 'image' && (
|
||||
<img
|
||||
src={preview}
|
||||
alt={`Preview ${idx}`}
|
||||
style={{ maxWidth: '100%', maxHeight: 300 }}
|
||||
/>
|
||||
)}
|
||||
{fileType === 'video' && (
|
||||
<video src={preview} controls style={{ maxWidth: '100%' }} />
|
||||
)}
|
||||
{fileType === 'audio' && (
|
||||
<audio src={preview} controls style={{ width: '100%' }} />
|
||||
)}
|
||||
{fileType === 'pdf' && (
|
||||
<iframe src={preview} width="100%" height="400px" />
|
||||
)}
|
||||
{fileType === 'unknown' && (
|
||||
<Typography>File ready. Click below to download.</Typography>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => handleDownload(file)}
|
||||
size="small"
|
||||
sx={{ mt: 1 }}
|
||||
variant="outlined"
|
||||
>
|
||||
Download {file.name}
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Typography>No output available yet.</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{zipFile && (
|
||||
<Box sx={{ mt: 2, textAlign: 'center' }}>
|
||||
<Button variant="contained" onClick={() => handleDownload(zipFile)}>
|
||||
Download All as ZIP
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<ResultFooter
|
||||
disabled
|
||||
hideCopy
|
||||
handleCopy={() => {}}
|
||||
handleDownload={() => {}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,62 +1,70 @@
|
||||
import { Box } from '@mui/material';
|
||||
import React, { useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import ToolContent from '@components/ToolContent';
|
||||
import ToolPdfInput from '@components/input/ToolPdfInput';
|
||||
import { ToolComponentProps } from '@tools/defineTool';
|
||||
import ToolTextInput from '@components/input/ToolTextInput';
|
||||
import ToolTextResult from '@components/result/ToolTextResult';
|
||||
import { GetGroupsType } from '@components/options/ToolOptions';
|
||||
import { CardExampleType } from '@components/examples/ToolExamples';
|
||||
import { main } from './service';
|
||||
import { InitialValuesType } from './types';
|
||||
import { convertPdfToPngImages } from './service';
|
||||
import ToolMultiFileResult from '@components/result/ToolMultiFileResult';
|
||||
|
||||
const initialValues: InitialValuesType = {
|
||||
// splitSeparator: '\n'
|
||||
type ImagePreview = {
|
||||
blob: Blob;
|
||||
url: string;
|
||||
filename: string;
|
||||
};
|
||||
|
||||
const exampleCards: CardExampleType<InitialValuesType>[] = [
|
||||
{
|
||||
title: 'Split a String',
|
||||
description: 'This example shows how to split a string into multiple lines',
|
||||
sampleText: 'Hello World,Hello World',
|
||||
sampleResult: `Hello World
|
||||
Hello World`,
|
||||
sampleOptions: {
|
||||
// splitSeparator: ','
|
||||
}
|
||||
}
|
||||
];
|
||||
export default function PdfToPng({
|
||||
title,
|
||||
longDescription
|
||||
}: ToolComponentProps) {
|
||||
const [input, setInput] = useState<string>('');
|
||||
const [result, setResult] = useState<string>('');
|
||||
export default function PdfToPng({ title }: ToolComponentProps) {
|
||||
const [input, setInput] = useState<File | null>(null);
|
||||
const [images, setImages] = useState<ImagePreview[]>([]);
|
||||
const [zipBlob, setZipBlob] = useState<File | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const compute = (values: InitialValuesType, input: string) => {
|
||||
setResult(main(input, values));
|
||||
const compute = async (_: {}, file: File | null) => {
|
||||
if (!file) return;
|
||||
setLoading(true);
|
||||
setImages([]);
|
||||
setZipBlob(null);
|
||||
try {
|
||||
const { images, zipFile } = await convertPdfToPngImages(file);
|
||||
setImages(images);
|
||||
setZipBlob(zipFile);
|
||||
} catch (err) {
|
||||
console.error('Conversion failed:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getGroups: GetGroupsType<InitialValuesType> | null = ({
|
||||
values,
|
||||
updateField
|
||||
}) => [
|
||||
{
|
||||
title: 'Example Settings',
|
||||
component: <Box></Box>
|
||||
}
|
||||
];
|
||||
return (
|
||||
<ToolContent
|
||||
title={title}
|
||||
input={input}
|
||||
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
|
||||
resultComponent={<ToolTextResult value={result} />}
|
||||
initialValues={initialValues}
|
||||
exampleCards={exampleCards}
|
||||
getGroups={getGroups}
|
||||
setInput={setInput}
|
||||
initialValues={{}}
|
||||
compute={compute}
|
||||
toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
|
||||
inputComponent={
|
||||
<ToolPdfInput
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
accept={['application/pdf']}
|
||||
title="Upload a PDF"
|
||||
/>
|
||||
}
|
||||
resultComponent={
|
||||
<ToolMultiFileResult
|
||||
title="Converted PNG Pages"
|
||||
value={images.map((img) => {
|
||||
return new File([img.blob], img.filename, { type: 'image/png' });
|
||||
})}
|
||||
zipFile={zipBlob}
|
||||
loading={loading}
|
||||
loadingText="Converting PDF pages"
|
||||
/>
|
||||
}
|
||||
getGroups={null}
|
||||
toolInfo={{
|
||||
title: 'Convert PDF pages into PNG images',
|
||||
description:
|
||||
'Upload your PDF and get each page rendered as a high-quality PNG. You can preview, download individually, or get all images in a ZIP.'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
import { expect, describe, it } from 'vitest';
|
||||
// import { main } from './service';
|
||||
//
|
||||
// describe('pdf-to-png', () => {
|
||||
//
|
||||
// })
|
||||
@@ -1,5 +1,51 @@
|
||||
import { InitialValuesType } from './types';
|
||||
import * as pdfjsLib from 'pdfjs-dist';
|
||||
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min?url';
|
||||
import JSZip from 'jszip';
|
||||
|
||||
export function main(input: string, options: InitialValuesType): string {
|
||||
return input;
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
|
||||
|
||||
type ImagePreview = {
|
||||
blob: Blob;
|
||||
url: string;
|
||||
filename: string;
|
||||
};
|
||||
|
||||
export async function convertPdfToPngImages(pdfFile: File): Promise<{
|
||||
images: ImagePreview[];
|
||||
zipFile: File;
|
||||
}> {
|
||||
const arrayBuffer = await pdfFile.arrayBuffer();
|
||||
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
|
||||
const zip = new JSZip();
|
||||
const images: ImagePreview[] = [];
|
||||
|
||||
for (let i = 1; i <= pdf.numPages; i++) {
|
||||
const page = await pdf.getPage(i);
|
||||
const viewport = page.getViewport({ scale: 2 });
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d')!;
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
|
||||
await page.render({ canvasContext: context, viewport }).promise;
|
||||
|
||||
const blob = await new Promise<Blob>((resolve) =>
|
||||
canvas.toBlob((b) => b && resolve(b), 'image/png')
|
||||
);
|
||||
|
||||
const filename = `page-${i}.png`;
|
||||
const url = URL.createObjectURL(blob);
|
||||
images.push({ blob, url, filename });
|
||||
zip.file(filename, blob);
|
||||
}
|
||||
|
||||
const zipBuffer = await zip.generateAsync({ type: 'arraybuffer' });
|
||||
const zipFile = new File(
|
||||
[zipBuffer],
|
||||
pdfFile.name.replace(/\.pdf$/i, '-pages.zip'),
|
||||
{ type: 'application/zip' }
|
||||
);
|
||||
|
||||
return { images, zipFile };
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
export type InitialValuesType = {
|
||||
// splitSeparator: string;
|
||||
};
|
||||
Reference in New Issue
Block a user