Enhance image processing settings in AnkiConnect

- Added height, width, and quality fields to AnkiConnect settings.
- Updated imageToWebp and getCroppedImg functions to accept settings for resizing and quality.
- Integrated settings into Cropper and QuickActions components for improved image handling.

Reason Note:

The recommended settings of 200 and 0.5 make average file sizes of around 5kb. This is about the same filesize as the audio for a given word.

With maximum quality and no file size limit, an image size of 1200x1800 pixels is around 1mb.

This means 1,000 words mined with full sized pictures takes up a 1gb of space on anki.

With the recommended settings, it would take 200,000 words mined to take up a GB of space on anki.

These quality settings can be disabled by settings the max quality to 1 and max width and height to 0. The user is in full control of these changes.

src/lib/anki-connect/index.ts

@@ -50,20 +50,44 @@ export async function blobToBase64(blob: Blob) {
   });
 }
 
-export async function imageToWebp(source: File) {
+export async function imageToWebp(source: File, settings: any) {
   const image = await createImageBitmap(source);
   const canvas = new OffscreenCanvas(image.width, image.height);
   const context = canvas.getContext("2d");
 
   if (context) {
     context.drawImage(image, 0, 0);
-    const blob = await canvas.convertToBlob({ type: 'image/webp' });
+    await imageResize(canvas, context, settings.ankiConnectSettings.widthField, settings.ankiConnectSettings.heightField);
+    const blob = await canvas.convertToBlob({ type: 'image/webp', quality: settings.ankiConnectSettings.qualityField });
     image.close();
 
     return await blobToBase64(blob);
   }
 }
 
+export async function imageResize(canvas: OffscreenCanvas,  ctx: OffscreenCanvasRenderingContext2D, maxWidth: number, maxHeight: number): Promise<OffscreenCanvas> {
+  return new Promise((resolve, reject) => {
+    const widthRatio = maxWidth <= 0 ? 1 : maxWidth / canvas.width;
+    const heightRatio = maxHeight <= 0 ? 1 : maxHeight / canvas.height;
+    const ratio = Math.min(1, Math.min(widthRatio, heightRatio));
+
+    if (ratio < 1) {
+        const newWidth = canvas.width * ratio;
+        const newHeight = canvas.height * ratio;
+        createImageBitmap(canvas, { resizeWidth: newWidth, resizeHeight: newHeight, resizeQuality: 'high' })
+            .then((sprite) => {
+                canvas.width = newWidth;
+                canvas.height = newHeight;
+                ctx.drawImage(sprite, 0, 0);
+                resolve(canvas);
+            })
+            .catch((e) => reject(e));
+    } else {
+        resolve(canvas);
+    }
+  });
+}
+
 export async function updateLastCard(imageData: string | null | undefined, sentence?: string) {
   const {
     overwriteImage,