diff --git a/src/pages/tools/image/generic/convert-to-webp/index.tsx b/src/pages/tools/image/generic/convert-to-webp/index.tsx index aa44e14..39dfc9b 100644 --- a/src/pages/tools/image/generic/convert-to-webp/index.tsx +++ b/src/pages/tools/image/generic/convert-to-webp/index.tsx @@ -9,13 +9,18 @@ import ToolContent from '@components/ToolContent'; import { ToolComponentProps } from '@tools/defineTool'; const initialValues = { - quality: 85, - backgroundColor: '#ffffff' + backgroundColor: '#ffffff', + // Initial Max Size is 5MB + maxSize: 50 }; const validationSchema = Yup.object({ quality: Yup.number().min(1).max(100).required('Quality is required'), - backgroundColor: Yup.string().required('Background color is required') + backgroundColor: Yup.string().required('Background color is required'), + maxSize: Yup.number() + .min(1) + .max(100) + .required('Maximum file size is required') }); export default function ConvertToJpg({ title }: ToolComponentProps) { @@ -30,7 +35,7 @@ export default function ConvertToJpg({ title }: ToolComponentProps) { const processImage = async ( file: File, - quality: number, + maxSize: number, backgroundColor: string ) => { const canvas = document.createElement('canvas'); @@ -62,19 +67,19 @@ export default function ConvertToJpg({ title }: ToolComponentProps) { ctx.drawImage(img, 0, 0); // Convert to JPG with specified quality - canvas.toBlob( - (blob) => { - if (blob) { - const fileName = file.name.replace(/\.[^/.]+$/, '') + '.webp'; - const newFile = new File([blob], fileName, { - type: 'image/webp' - }); - setResult(newFile); - } - }, - 'image/webp', - quality / 100 - ); + canvas.toBlob((blob) => { + if (blob) { + const fileName = file.name.replace(/\.[^/.]+$/, '') + '.webp'; + const newFile = new File([blob], fileName, { + type: 'image/webp' + }); + + // Calculate if Size of Image Exceeds the Max + + // Return File As Result + setResult(newFile); + } + }, 'image/webp'); } catch (error) { console.error('Error processing image:', error); } finally { @@ -82,7 +87,7 @@ export default function ConvertToJpg({ title }: ToolComponentProps) { } }; - processImage(input, optionsValues.quality, optionsValues.backgroundColor); + processImage(input, optionsValues.maxSize, optionsValues.backgroundColor); }; return ( @@ -113,13 +118,13 @@ export default function ConvertToJpg({ title }: ToolComponentProps) { - JPG Quality: {values.quality}% + WebP File Size: {values.maxSize}MB updateField( - 'quality', + 'maxSize', Array.isArray(value) ? value[0] : value ) }