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/components/Settings/AnkiConnectSettings.svelte

@@ -13,6 +13,10 @@
   let pictureField = $settings.ankiConnectSettings.pictureField;
   let sentenceField = $settings.ankiConnectSettings.sentenceField;
 
+  let heightField = $settings.ankiConnectSettings.heightField;
+  let widthField = $settings.ankiConnectSettings.widthField;
+  let qualityField = $settings.ankiConnectSettings.qualityField;
+
   let triggerMethod = $settings.ankiConnectSettings.triggerMethod;
 
   const triggerOptions = [
@@ -90,5 +94,37 @@
         />
       </Label>
     </div>
+    <hr>
+    <h4>Quality Settings</h4>
+    <Helper>Allows you to customize the file size stored on your devices</Helper>
+    <div>
+      <Label>Max Height (0 = Ignore; 200 Recommended):</Label>
+      <Input
+        {disabled}
+        type="number"
+        bind:value={heightField}
+        on:change={() => {updateAnkiSetting('heightField', heightField); if (heightField < 0) heightField = 0;}}
+        min={0}
+      />
+    </div>
+    <div>
+      <Label>Max Width (0 = Ignore; 200 Recommended):</Label>
+      <Input
+        {disabled}
+        type="number"
+        bind:value={widthField}
+        on:change={() => {updateAnkiSetting('widthField', widthField); if (widthField < 0) widthField = 0;}}
+        min={0}
+      />
+    </div>
+    <div>
+      <Label>Quality (Between 0 and 1; 0.5 Recommended):</Label>
+      <Input
+        {disabled}
+        type="number"
+        bind:value={qualityField}
+        on:change={() => updateAnkiSetting('qualityField', qualityField)}
+      />
+    </div>
   </div>
 </AccordionItem>